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内 容 提 要 


Boostrap 是 Twitter 公司 内 部 的 一 个 工具 ， 开 源 之 后 迅速 得 到 了 各 方 的 认可 。 本 书 基于 最 新 Bootstrap 4 
撰写 ， 在 简单 介绍 了 安装 与 配置 之 后 就 直 奔 主 题 ， 分 别 讨论 了 构建 流程 、 博 客站 点 、WordPress 主题 、 个 人 
作品 展示 站 点 、 企 业 网 站 、 电 子 商务 网 站 、 单 页 面 营销 网 站 和 Angular 应 用 等 几 个 最 具 代 表 性 的 应 用 案例 ， 
结合 这 些 案例 细致 地 剖析 了 Bootstrap 的 使 用 方式 和 技巧 。 

本 书 适合 所 有 前 端 开 发 人 员 及 个 人 网 站 设计 者 阅读 参考 。 
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2011 年 8 H, Twitter Bootstrap 横 
前 端 设 计 领 域 最 受 欢 迎 的 辅助 技术 。 
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to WS, ANRA Bootstrap 的 框架 
在 和 Bootstrap 打 了 5 年 多 的 交道 后 ， 我 很 
QW 
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Bootstrap 4 是 又 一 个 里 程 碑 式 的 版 本 ， 它 针对 现代 浏览 器 优化 了 核心 代码 。 使 用 Bootstrap, 
即 可 用 一 套 代码 来 搭建 在 各 种 设备 类 型 和 设备 尺寸 上 都 有 良好 表现 的 网 站 与 应 用 。 
进行 。 








和 HTML 领域 ，Bootstrap 引领 我 使 用 相关 的 最 佳 实践 。 它 在 帮助 交付 稳定 成 果 的 同时 ， 也 大 大 
提升 了 我 的 工作 效率 。 训 无 疑问 ，Bootstrap 使 我 成 为 了 更 优秀 的 Web 开发 人 员 。 

















业 用 户 界 面 的 技巧 。 


Bootstrap 是 基于 MIT 许可 证 而 发 布 的 开源 软件 ， 它 的 网 站 托管 、 开 发 与 维护 均 在 GitHub 上 

本 书 详细 介绍 Bootstrap 的 使 用 方法 。 全 书简 明 易 懂 ， 循 序 渐进 ， 让 你 时 时 处 处 体验 到 自 定 

义 和 重 编译 Bootstrap 的 Sass 文件 的 强大 威力 ， 同 时 掌握 应 用 Bootstrap 的 JavaScript f 
ra 














本 书 内 容 





最 后 ， 本 书 并 不 局 限于 Bootstrap。Bootstrap 只 是 一 个 工具 
本 书 之 后 ， 你 将 成 为 一 位 更 加 熟练 、 高 效 的 Web 设计 师 。 


A 
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一 种 达到 目标 的 手段 。 学 
1 章 “ 初 识 Bootstrap”， 教 大 家 如 何 下载 Bootstrap, Anfi 
点 模板 ， 以 及 如 何 把 Bootstrap 的 Sass 文件 编译 为 CSS。 





I 











E 


Eo 


























你 可 将 这 一 流程 重用 于 自己 的 新 项 目 。 构 建 流程 会 把 自己 的 Sass 代码 编译 成 CSS 代码 ， 准 
备 JavaScript 代码 ， 以 及 运行 静态 网 页 服务 器 以 测试 结 


F HTMLS Boilerplate 设置 站 
第 2 章 “用 Gulp 打造 自己 的 构建 流程 "， 教 大 家 如 何 用 Gulp 来 创建 Bootstrap 项 目的 构建 流 
第 3 章 “ 用 Bootstrap 和 Sass 定制 博客 站 点 ”， 


pa 
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大 家 初 识 Sass。 你 将 学 习 如 何 使 用 Sass 来 
定制 Bootstrap 组 件 。 本 章 将 为 Web 日 志 开 发 一 个 网 页 ， 并 以 不 同 的 策略 用 Sass 来 调整 样式 。 


写作 本 书 并 与 你 分 享 自己 的 经 验 。 在 CSS 


上 件 设计 专 


IM 


JOIA 








第 4 章 “WordPress 主题 "， 学 习 把 个 人 作品 展示 站 点 转换 成 一 个 WordPress 主题 。 本 章 要 利用 
知名 的 JBST 4 Starter Theme ， 还 会 定制 模板 文件 、Sass 、CSS 和 JavaScript， 以 满足 自身 的 需要 。 


第 5 章 “ 作 品 展示 站 点 ”， 开 始 学 习 创 建 简单 的 个 人 作品 展示 站 点 ， 包 括 全 宽 的 传送 带 切 换 
效果 、 三 栏 文本 布局 ,以 及 使 用 Font Awesome 的 字体 图 标 一 一 通过 自 定义 Bootstrap 的 Sass 文件 
以 及 增加 自己 的 Sass 文件 来 实现 。 

第 6 章 “ 企 业 网 站 ”， 学 习 如 何 创 建 复杂 的 页 头 区 ,添加 下 拉 菜 单 和 实用 导航 ， 以 及 构建 复 
杂 的 三 栏 布局 和 四 栏 页 脚 ， 同 时 还 要 确保 所 有 这 些 内 容 具 有 完全 的 响应 能 力 。 

第 7 章 “ 电 子 商 务 网 站 ”， 带 领 大 家 探索 商品 展示 页 面 的 设计 ， 学 会 在 复杂 的 响应 式 网 格 中 
管理 多 行商 品 。 与 此 同时 ， 还 要 实现 一 个 响应 式 设 计 的 选项 ， 可 根据 目录 、 品 牌 等 筛选 商品 。 
































第 8 章 “ 单 页 面 营 销 网 站 ”， 教 大 家 如 何 设计 一 个 漂亮 的 单 页 面 滚动 式 营销 网 站 ， 包 括 大 字 
欢迎 语 、 带 大 图 标的 商品 特征 列表 、 图 片 墙 式 的 用 户 评论 区 ， 以 及 三 个 精美 的 价目 表 。 


第 9 章 “ 用 Bootstrap 搭建 Angular 应 用 ”， 学 习 如 何 用 Bootstrap 4 来 创建 Angular 应 用 。 本 
章 最 后 将 介绍 一 些 用 于 项 目 部 署 的 其 他 工具 。 
本 书 要 求 

要 完成 本 书 各 章 的 项 目 ， 需 要 安装 下 列 软件 : 


a 现代 浏览 上 
口 文本 或 代码 编辑 带 ; 
口 在 系统 中 安装 Node.js。 


























写作 本 书 时 ， 我 们 使 用 最 新 的 Bootstrap ZI: Alpha 4。 之 后 的 重要 更 新 则 会 
包含 在 Bootstrap 4 的 正式 发 行 版 中 。 


读者 对 象 


本 书 适合 已 经 熟练 掌握 HTML 和 CSS 基础 ， 且 熟悉 规范 的 HTMLS 标记 和 样式 表 的 写法 的 
读者 。 了 解 JavaScript 的 基础 知识 会 更 好 ， 因 为 本 书 会 用 到 Bootstrap 的 jQuery 搬 件 。 本 书 经 常 
会 用 LESS 来 自 定义 、 编 写 和 编译 样式 表 ， 因 此 熟悉 LESS 的 读者 在 处 理 其 细节 时 会 感觉 更 轻松 
一 些 。 不 过 ， 即 便 从 来 没有 使 用 过 LESS， 本 书 由 浅 入 深 的 介绍 ， 也 会 让 你 顺利 入 门 。 























本 书 约定 
本 书 正文 中 有 很 多 种 版 式 ， 以 区 分 不 同 的 信息 。 以 下 是 这 些 版 式 的 举例 及 其 意义 的 解释 。 


z 
uj 





代码 段 将 以 等 宽 字体 印刷 ， 比 如 : 


.btn-tomato { 
color: white; 
background-color: tomato; 
border-color: white; 

} 

命令 行 中 的 输入 和 输出 会 以 下 面 的 方式 来 显示 : 





npm install --global gulp-cli 


新 术语 和 重要 的 词汇 将 采用 黑体 字 。 


人 这 个 图 标 表示 提示 或 技巧 。 


读者 反馈 


欢迎 提出 反馈 ,你 对 本 书 有 任何 想法 ,喜欢 它 什么 ,不 喜欢 它 什 么 ,请 告诉 我 们 。 要 写 出 真 
正 对 大 家 有 帮助 的 图 书 ， 你 的 反馈 很 重要 。 一 般 的 反馈 ， 请 发 送 电子 邮件 至 feedback@packtpub. 
com， 并 在 邮件 主题 中 注 明 书 名 。 如 果 你 掌握 某 个 主题 的 专业 知识 ， 并 且 有 兴趣 写成 或 帮助 促成 
一 本 书 ， 请 参考 我 们 的 作者 指南 : http//www.packtpub.com/authors. 


EX 
现在 , 你 是 一 位 令 我 们 自豪 的 Packt 图 书 的 拥有 者 , 我 们 会 尽 全 力 帮 你 充分 利用 你 手中 的 书 。 











下 载 示例 代码 ” 


你 可 以 用 你 的 账户 从 http://www.packtpub.com 下 载 本 书 的 示例 代码 文件 。 如 果 你 从 其 他 地 方 
购买 的 本 书 , 可 以 访问 http;//www.packtpub.com/support 并 注册 , 我 们 将 通过 电子 邮件 把 文件 发 送 


给 你 。 
可 以 按 以 下 步骤 来 下 载 源 代码 文件 。 
(1) 在 我 们 的 网 站 上 ， 用 电子 邮箱 和 密码 登录 或 注册 。 




















QD 你 可 以 直接 访问 本 书 中 文 版 页 面 ， 下 载 本 书 项 目的 源 代 码 : http://ituring.cn/book/1961。 一 一 编者 注 








(2) 将 鼠标 悬浮 到 页 面 顶部 的 SUPPORT 标签 上 。 
(3) 点 击 “Code Download & Errata" ; 

(4) 在 Search 搜索 框 中 输入 本 书 书 名 。 

(5) 选择 需要 下 载 源 代码 的 相应 图 书 。 

(6) 在 下 拉 菜 单 中 选择 购买 本 书 的 途径 。 

(7) 点 击 “Code Download”。 


文件 下 载 完成 后 ， 请 用 以 下 软件 的 最 新 版 本 将 其 解压 缩 成 文件 夹 : 


a Æ Windows 上 ， 使 用 WinRAR / 7-Zip 
a 在 Mac 上 ， 使 用 Zipeg / iZip / UnRarX 
Q 在 Linux 上 ， 使 用 7-Zip / PeaZip 














本 书 的 代码 同时 还 托管 在 GitHub 上 ， 地 址 为 https://github.com/PacktPublishing/Bootstrap-4- 
Site-Blueprints。 通 过 访问 https://github.com/PacktPublishing/， 还 可 以 下 载 其 他 更 多 图 书 与 视频 所 
附带 的 源 代码 。 试 一 下 吧 !1 

















下 载 本 书 中 的 彩 图 


本 书 还 提供 了 一 个 PDF 文件 ， 其 中 包括 了 书 中 所 使 用 到 的 截图 /图 表 的 彩 图 。 这 些 彩 图 可 以 
帮助 你 更 好 地 理解 输出 的 变化 。 可 以 从 以 下 地 址 下 载 该 文件 : http://www.packtpub.com/sites/ 
default/files/downloads/Bootstrap4SiteBlueprints ColorImages.pdf, 














勘误 表 


虽然 我 们 已 尽力 确保 本 书 内 容 正 确 ， 但 出 错 仍旧 在 所 难免 。 如 果 你 在 我 们 的 书 中 发 现 错误 ， 
不 管 是 文本 还 是 代码 ， 希 望 能 告知 我 们 ， 我 们 不 胜 感激 。 这 样 做 ， 你 可 以 使 其 他 读者 免 受 挫败 ， 
以 及 帮助 我 们 改进 本 书 的 后 续 版 本 。 如 果 你 发 现任 何 错误 ， 请 访问 http://www.packtpub. 
com/submit-errata 提交 。 TEREZ, Hit Errata Submission Form 链接 ， 并 输入 详细 说 明 。 勘 
误 一 经 核实 ， 你 的 提交 将 被 接受 ， 此 勘误 将 上 传 到 本 公司 网 站 或 添加 到 现 有 勘误 表 。 





























如 需 查看 已 提交 的 勘误 ， 可 以 访问 https://www.packtpub.com/books/content/support， 在 搜索 
区 输入 书 名 进行 搜索 。 勘 误 信 息 会 显示 在 Errata 区 域 中 。 


侵权 行为 
版 权 材料 在 互联 网 上 的 盗版 是 所 有 媒体 都 要 面 对 的 问题 。 Packt 非常 重视 保护 版 权 和 许可 证 。 























(D 本 书 中 文 版 的 勘误 请 到 http://ituring.cn/book/1961 查看 和 提交 。 一 一 编者 注 














如 果 你 发 现 我 们 的 作品 在 互联 网 上 被 以 任何 形式 非法 复制 ， 请 立即 为 我 们 提供 地 址 或 网 站 名 称 ， 
以 便 我 们 可 以 寻求 补救 。 
请 把 可 疑 盗版 材料 的 链接 发 到 copyright(packtpub.com. 
非常 感谢 你 帮助 我 们 维护 作者 ， 以 及 我 们 给 你 带 来 有 价值 内 容 的 能 力 。 
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问题 


如 果 你 对 本 书 内 容 存 有 疑问 ,不管 是 哪个 方面 ， 都 可 以 通过 questions@packtpub.com 联系 我 
们 ， 我 们 将 尽 最 大 努力 来 解决 。 



































电子 书 
扫描 如 下 二 维 码 ， 即 可 购买 本 书 电子 版 。 
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初 识 Bootstrap 








作为 Web 前 端 开发 框架 ，Bootstrap 的 流行 很 容易 理解 。 它 为 大 多 数 标准 的 UI 设计 场景 提供 
了 用 户 友好 、 蜂 浏览 锅 的 解决 方案 。 它 现成 可 用 且 经 受 了 社区 考验 的 HTML PRE, CSS 样式 及 
JavaScript 插件 ， 极 大 提高 了 Web 前 端 界面 的 开发 效率 ， 创 造 出 令 人 愉悦 的 效果 。 有 了 这 些 基 本 
的 元 素 ， 开 发 人 员 就 有 了 定制 设计 的 坚实 基础 。 

Bootstrap 使 用 Grunt 构建 CSS 和 JavaScript, 并 使 用 Jekyll 来 写作 文档 。Grunt 是 Node.js 中 


的 一 个 JavaScript 任务 管理 器 。 除 此 之 外 ， 也 可 使 用 其 他 的 工具 与 技术 来 构建 Bootstrap。 本 书 将 
介绍 一 些 其 他 的 构建 Bootstrap 的 方法 。 


不 过 , 流行 、 高 效 、 有 效 也 不 一 定 都 是 好 事 。 由 于 工具 便捷 而 导致 人 们 养 成 坏 习 惯 的 例子 屡 
见 不 鲜 。 然 而 ，Bootstrap 却 没有 ， 至 少 不 一 定 有 这 个 问题 。 从 它 面世 就 一 直 关 注 它 的 人 都 知道 ， 
它 的 早期 版 本 和 更 新 有 时 候 会 更 侧重 实际 效率 ,而 非 最 佳 实践 。 事 实 上 , 一 些 最 佳 实践 ,不 管 是 
语义 标记 还 是 移动 优先 的 设计 ， 抑 或 资源 性 能 优化 ,都 需要 额外 的 时 间 和 精力 才能 实现 。 本 章 将 
介绍 Bootstrap ， 并 教 大 家 以 下 内 容 : 

采用 当前 的 一 些 最 佳 实践 ， 创 建 出 高 质量 的 HIML5 标记 结构 : 
口 用 Bootstrap CLI 创建 一 个 新 的 Bootstrap 项 目 ; 
口 在 项 目 页 面 中 加 入 折 闭 内 容 ; 
口 为 页 面 创建 导航 条 ; 
Q 将 导航 条 制作 为 响应 式 组 件 。 




































































1.1 数量 和 质量 


运用 得 当 的 情况 下 ， 我 认为 Bootstrap 无 论 从 质量 还 是 效率 上 讲 ， 都 是 Web 开发 社区 的 一 大 
福利 。 随 着 越 来 越 多 的 开发 者 使 用 这 个 框架 ， 越 来 越 多 的 人 也 加 入 了 这 个 社区 ， 从 而 逐步 接受 了 
前 沿 的 最 佳 实践 。Bootstrap 从 一 开始 就 鼓励 可 靠 、 成 熟 及 面向 未 来 的 CSS 方案 ， 比 如 Nicholas 
Galagher 的 CSS normalize， 以 及 用 CSS3 方案 解决 图 片 过 多 的 问题 。 此 外 ， 它 也 支持 HTML5 语 
义 标记 。 
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2 第 1# 7 Bootstrap 





1.1.1 与 时 俱 进 


Bootstrap v2.0 发 布 之 后 ,响应 式 设计 随 之 成 为 主流 ,其 界面 元 素 也 做 到 了 跨 设备 响应 ( 包括 
台式 设备 、 平 板 和 手持 设备 )。 


随 着 Bootstrap v3.0 的 发 布 ， 其 功能 愈加 完善 ， 拥 有 了 如 下 特性 。 


口 移动 优先 的 啊 应 式 网 格 。 

口 基于 Web 字体 的 图 标 ， 适 用 于 移动 端 及 高 分 辨 率 屏幕 。 

O 不 再 支持 IE7， 标 记 和 样式 更 加 简洁 高 效 。 

口 从 3.2 版 本 开始 ， 必 须 使 用 autoprefixer 才能 构建 Bootstrap。 

O 本 书 对 应 的 是 Bootstrap v4.0 版 本 。 该 版 本 在 引入 很 多 新 的 组 件 与 改进 的 同时 ， 也 握 弃 了 
一 些 旧 的 组 件 。 下 述 摘要 中 列举 了 Bootstrap 4 中 最 重要 的 改进 与 变化 : 


m Less ( Leaner CSS ) 被 Sass 所 替代 ; 

m 重 构 了 CSS 代码 ， 避 免 使 用 标签 选择 符 与 子 元 素 选择 符 ; 
m 改进 网 格 系统 ， 更 好 地 适 配 移动 端 设 备 ; 

m 替换 导航 条 ; 

m 可 选 的 Flexbox 支持 。 
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O 新 的 HTML 重 置 模块 Reboot; Reboot 继承 自 Nicholas Galagher 的 CSS normalize, ， 并 负责 
CSS 规则 box-sizing: border-box 的 声明 。 

O jQuery 插件 现 已 均 由 ES6 编写 ， 并 支持 UMD 模块 方案 。 

口 受 助 于 Tether 这 一 类 库 ， 提 示 语 (tooltip ) 组 件 和 弹 框 (popover ) 组 件 的 自动 布局 获得 了 
改 it". 

O 舍弃 了 对 Internet Explorer 8 的 支持 ， 因 此 可 以 将 样式 单位 中 的 像素 值 替 换 为 rem 和 em. 
口 增加 Card 组件 ， 替 换 之 前 版 本 中 的 Well, Thumbnail 和 Panel 组 件 。 

口 舍弃 Glyphicon Halflings 图 标 集中 的 字体 图 标 。 

OQ 舍弃 Affix 插件 ， 由 支持 position: sticky 的 修补 器 (polyfill ) 所 蔡 代 。 















































1.1.2 Sass 的 威力 


使 用 Bootstrap 时 , 可 以 考虑 用 上 强大 的 Sasso 作为 CSS 的 预 处 理 器 ,Sass 延伸 了 CSS 的 语法 ， 
增添 了 变量 、 混 入 和 函数 等 特性 ， 帮 助 用 户 以 DRY (Don't Repeat Yoursef， 避 免 重复 代码 ) 的 方 
式 来 编写 CSS 代码 。 原 生 的 Sass 是 用 Ruby 编写 的 ， 如 今 则 可 以 使 用 速度 更 快 的 C++ 移植 版 ， 
libSass。 与 旧式 的 Sass 缩 排 语法 相 比 ，Bootstrap 使 用 的 是 更 为 现代 的 SCSS 语法 。 





























(D 对 Tether 的 依赖 仅 存在 于 Bootstrap 4 Alpha 版 本 ， 自 Bootstrap 4 Beta 版 本 开始 ， 这 一 依赖 关系 被 Popperjs 插件 
取代 。 译 者 注 
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对 于 那些 在 日 常 工作 中 使 用 CSS， 并 对 函数 式 编程 语言 有 所 了 解 的 读者 来 说 ， 学 
i) 3] Sass 的 难度 不 大 。 如 需 深 入 理解 Sass, 可 以 阅读 淫 作 Sass and Compass Designer S 
Handbook。 


Bootstrap 4 用 Sass 取代 了 之 前 的 CSS 预 处 理 需 Less。 由 于 Sass 开发 者 社区 日 渐 壮 大 ， 因 此 
与 Less 相 比 ，Bootstrap 团队 更 加 青睐 Sass。 习 惯 使 用 Less 并 有 意 就 此 切换 到 Sass 的 读者 需要 认 
识 到 : 与 声明 式 风格 的 Less 相 比 ，Sass 更 像 是 一 种 函数 式 编程 语言 。 在 Sass 中 ， 变 量 不 经 定义 
是 无 法 使 用 的 , 因此 需要 在 代码 的 开头 就 修改 变量 。Bootstrap 中 的 变量 都 有 默认 值 , 可 以 再 次 声 
明和 赋值 这 些 变量 名 ， 从 而 实现 对 默认 值 的 覆 写 。 

与 Less 相反 ，Sass 不 支持 if-else-then 结构 和 for, foreach 循环 。 

从 单纯 给 标记 添加 类 到 定制 Bootstrap 的 SCSS 文件 , 大 幅 提 高 了 我 们 的 能 力 和 工作 效率 。 在 
Bootstrap 默认 的 样式 表 基 础 之 上 , 开发 人 员 可 以 发 挥 自 己 的 创造 力 , 定制 自己 的 内 容 。 换 句 话 说， 
Bootstrap 确实 非常 强大 。 我 会 在 本 书 中 告诉 大 家 如 何以 有 趣 而 严谨 的 方式 , 利用 它 实 现 高 效 工作 
和 最 佳 实践 ， 以 及 做 出 漂亮 、 用 户 友好 的 界面 。 

































































1.1.3 下载 已 编译 代码 


在 http:/getbootstrap.com/ 网 站 上 ， 可 以 找到 按钮 来 下 载 编译 好 的 Bootstrap 代码 。 下 载 下 来 
的 文件 包括 编译 好 的 CSS 代码 和 JavaScript 代码 ， 可 以 直接 用 于 项 目 中 。 这 些 编译 好 的 CSS 和 
JavaScript 代码 赛 括 了 Bootstrap 中 所 有 的 组 件 和 功能 。 本 书 稍 后 将 介绍 如 何 创 建 定制 版 本 的 
Bootstrap ， 其 中 只 包含 那些 真正 要 用 到 的 组 件 和 功能 。 


除了 下 载 默认 的 版 本 外 , 还 可 以 选择 支持 Flexbox 的 版 本 , 或 者 仅 包含 网 格 系统 的 Bootstrap 
版 本 。 





















































1.1.4 支持 Flexbox 的 版 本 


在 http:/getbootstrap.comy/ 网 站 上 ， 还 可 以 下 载 支 持 Flexbox 的 Bootstrap。 切 换 到 Flexbox 版 
本 后 无 须 对 HTML 做 任何 变更 ， 唯 一 要 做 的 就 只 是 修改 CSS 源 文件 。 





1.1.5 仅 包 含 网 格 系统 的 版 本 


Bootstrap 内 置 了 一 个 移动 优先 的 、12 栏 布局 的 、 响 应 式 网 格 系统 。 对 于 那些 只 需要 在 项 目 
中 使 用 网 格 系统 的 人 来 说 ， 可 以 选择 下 载 仅 包含 网 格 系统 的 Bootstrap 版 本 。 该 版 本 提供 了 预定 
义 的 网 格 标签 类 ， 且 无 须 加 载 任 何 JavaScript 文件 。 在 这 种 情况 下 ， 如 1.6 节 中 “Box-sizing” 部 
分 所 描述 的 ， 使 用 者 需 自 行 定义 包括 box-sizing: border-box 在 内 的 HTML 重 置 规则 。 

















-z— 
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在 该 版 本 中 ， 除 了 能 使 用 预定 义 的 网 格 标签 类 ， 还 能 利用 Sass 中 的 变量 和 混入 来 定制 符合 
语义 的 响应 式 页 面 布局 。 
1.1.6 从 CDN 加 载运 行 Bootstrap 


除了 下 载 Bootstrap 这 一 方法 外 ， 还 可 以 在 项 目 中 通过 CDN ( 内 容 分 发 网 络 ) 来 加 载 Bootstrap。 
CDN 可 用 来 给 多 个 服务 器 分 配 人 带宽， 进而 让 用 户 从 离 其 最 近 的 资源 节点 下 载 静 态 内 容 。 




















可 以 从 以 下 CDN 加 载 Bootstrap: https://www.bootstrapedn.com/, BootstrapCDN 
由 MaxCDN 提供 技术 支持 ， 其 官方 网 站 为 : https:/www.maxcdn.comy/。 


子 资源 完整 性 〈SRI) 


其 他 人 可 以 通过 控制 CDN 上 的 代码 而 随心 所 欲 地 向 文件 中 注入 恶意 内 容 , 因 此 CDN 还 是 存 
在 不 小 的 风险 的 。 为 了 规避 这 一 风险 ， 可 以 在 那些 加 载 CDN 文件 的 <script> 元 素 和 <1link> 元 
素 中 添加 完整 性 属性 。 该 属性 值 应 当 是 一 个 以 base64 编码 的 sha384 散 列 。 除 此 之 外 , 还 应 当 
在 这 些 元 素 中 添加 crossorigin 属性 。 从 MaxCDN 加 载 jQuery 的 script 元 素 的 写法 如 下 : 


«script src-"http://code.jquery.com/jquery-2.2.3.min.js" 
integrity-"sha256-a23g1Nt4dtEYOj7bR«vTu7-4T8VP13humZFBJNIYOEJo-" 
crossorigin-"anonymous"»«/script» 
































qp 关于 子 资源 完整 性 ， 可 以 从 https://www.w3.org/TR/SRUK JC €. £ 8548 8; 


1.2 TÈ Bootstrap 源 文 件 


下 载 Bootstrap 的 途径 很 多 ， 但 通过 这 些 途 径 下 载 的 文件 并 不 完全 一 样 。 为 了 后 面 考 虑 ， 我 
们 必须 确保 下 载 到 Sass 文件 ， 因 为 这 些 文件 可 以 为 我 们 提供 定制 和 创新 的 基础 。 在 这 里 ， 我 们 
MERKI, FIF http://getbootstrap.com. 

















E 


Build responsive, mobile-first projects on the web with the 


orld's most popular front-end component library. 


Bootstrap is an open source toolkit for developing with 
HTML, CSS, and JS. Quickly prototype your ideas or build 






your entire app with our Sass variables and mixins, 
responsive grid system, extensive prebuilt components, and 


powerful plugins built on jQuery. 





Get started | | Download 
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打开 网 站 ， 一 眼 就 能 看 到 大 大 的 “Download” 按 钮 。 


知情 形 有 变 ， 也 可 以 访问 GitHub 上 的 项 目 链接 ( https://github.com/twbs/bootstrap )， 点 击 
“Download ZIP” 按 钮 来 下 载 ; 或 者 运行 以 下 命令 来 克隆 整个 Bootstrap 项 目 : 


git clone https://github.com/twbs/bootstrap.git 





1.2.1 下 载 后 的 文件 
下 载 Bootstrap 的 源 文 件 之 后 ， 应 该 能 看 到 类 似 下 图 所 示 的 文件 结构 。 








bower.json 
CHANGELOG . md 
CNAME 
composer.json 
 config.yml 
CONTRIBUTING.md 
dist 

docs 

Gemfile 
Gemfile.lock 
gh pages 
grunt 
Gruntfile.js 
js 

LICENSE 

node modules 
nuget 
package.js 
package. json 
README . md 
sache.json 
SCSS 











除了 SCSS 代码 和 jQuery 插件 的 EMG 代码 等 Bootstrap 源 文件 外 ， 上 述 文件 中 还 包括 了 用 于 
构建 Bootstrap 的 内 容 。Bootstrap 默认 由 Grunt RÈ, WA, 文件 不 少 ,但 并 非 全 都 需要 。 无 
论 如 何 ， 这 里 包含 了 Bootstrap 所 能 提供 的 一 切 。 值 得 注意 的 是 ， 正 如 之 前 所 提 到 的 ，Glyphicon 
Halfling 字体 集 已 被 舍弃 ,因此 源 文件 中 并 不 包含 字体 文件 。Bootstrap 中 的 默认 字体 仅 由 CSS ix 
定 ， 无 须 依 赖 任何 字体 文件 。 

随 着 时 间 推 移 ， 下 载 到 的 文件 中 的 实际 内 容 可 能 会 有 所 变化 , 但 主要 内 容 通常 不 会 变 。 需 要 
注意 的 是 ， 在 sess 文件 夹 中 ， 可 以 找到 所 有 重要 的 Sass 文件 ， 它 们 是 本 书 所 有 项 目的 关键 。 另 
外 ,js 文件 夹 中 包含 Bootstrap 的 独立 JavaScript 插件 ， 可 供 我 们 选择 使 用 。 


此 外 ， 假 如 你 只 需要 Bootstrap 默认 提供 的 预 编 译 的 CSS 或 JavaScript 文 件 ( 如 bootstrap.css 
或 bootstrap.min.js )， 也 可 以 在 dist 文件 夹 中 找到 它们 。 这 些 预 编 译文 件 的 结构 如 下 。 
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CSS 
bootstrap.css 
bootstrap.css.map 
bootstrap.min.css 


bootstrap.min.css.map 
js 


bootstrap.js 
bootstrap.min.js 


c. 


npm.js 
umd 














上 图 中 , umd 文件 夹 包含 了 用 于 在 CommonJS 环境 中 进行 require () 操 作 的 插件 文件 。 这 
些 文件 符合 UMD (Universal Module Definition ) 规范 。 作 为 脚本 加 载 机 制 ，CommonJS 和 AMD 
都 能 确保 不 同 的 JavaScript 组 件 以 正确 的 顺序 加 载 、 协 同 。 通 用 的 UMD 规范 同时 支持 CommonJS 
和 AMD。 








另外 ,在 源 文 件 里 ， 还 有 一 个 docs/examples 文件 夹 ， 其 中 包含 示例 HTML 模板 。 我 们 第 一 
个 项 目的 模板 文件 夹 就 会 基于 其 中 一 个 示例 来 创建 。 





1.22 ”下载 安装 Bootstrap 的 其 他 方法 


除了 直接 下 载 ， 还 可 以 用 其 他 工具 和 包 管 理 器 来 获取 Bootstrap 文件 ， 具 体 可 参考 下 列 命令 
和 工具 。 











口 用 npm 来 安装 : npm install bootstrap 

口 用 Meteor 来 安装 : meteor add twbs:bootstrap 

口 用 Composer 来 安装 : composer require twbs/bootstrap 
口 用 Bower 来 安装 : bower install bootstrap 

口 用 NuGet 来 安装 : 





m CSS: Instal1-Package bootstrap -Pre 
m Sass: Install-Package bootstrap.sass -Pre 


13 工具 配置 


如 果 要 使 用 Grunt 文件 来 在 本 地 运行 Bootstrap X, 则 需 下 载 Bootstrap 源 文件 并 配置 Node 
和 Grunt 环境 。 可 通过 执行 以 下 步骤 来 实现 Bootstrap 的 构建 流程 : 

















口 通过 npm install -g grunt-cli 安装 Grunt 命令 行 工具 grunt-cli; 

O 到 /bootstrap 根 目录 ,运行 npm install 来 安装 在 package.json 文件 中 所 列举 的 本 地 依赖 ; 
O 安装 Ruby, 并 用 gem install bundler 来 安装 Bundler, 最 后 再 运行 pundle install, 
该 命令 会 安装 项 目 中 所 有 的 Ruby 依赖 ， 如 Jekyll 和 其 他 插件 。 
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至 此 ， 即 可 在 /bootstrap 根 目录 中 通过 运行 以 下 命令 来 在 本 地 启动 Bootstrap 文档 : 


bundle exec jekyll serve 





接 下 来 ， 可 以 访问 http://localhost:9001 来 查看 文档 和 示例 。 


HTML 初始 模板 


下 载 Bootstrap 源 文件 后 ， 即 可 将 dist 文件 夹 中 编译 好 的 CSS 和 JavaScript 文件 用 于 HTML 
中 。 可 参考 以 下 示例 ， 创 建 一 个 新 的 HTML 模板 : 
<!DOCTYPE html» 


«html lang="en"> 
<head> 








<!-- Required meta tags always come first --> 

<meta charset="utf-8"> 

<meta name-"viewport" content="width=device-width, initial-scale-1, 
shrink-to-fit=no"> 

«meta http-equiv-"x-ua-compatible" content="ie=edge"> 

«l-- Bootstrap CSS --» 

«link rel-"stylesheet" href-"https://maxcdn.bootstrapcdn.com/bootstrap/ 
4.0.0-alpha.2/css/bootstrap.min.css"» 





</head> 
<body> 
<h1>Hello, world!</h1> 
<!-- jQuery first, then Bootstrap JS. --> 


<script src-"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/ 
jquery.min.js"»«/script» 

«script src-"https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/ 
tether.min.js"»«/script» 

«script src-"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/ 
js/bootstrap.min.jsg"»«/script» 

«/body» 
</html> 


如 上 所 示 ，HTML 代码 应 以 HTMLS 的 文档 类 型 标记 <!DocTYPE html> 开 头 。 





1. 响应 式 meta 标签 
Bootstrap 支持 响应 式 并 遵循 “移动 优先 ”的 设计 理念 ， 所 以 HTML 代码 的 head 区 域 中 应 包 
含 如 下 响应 式 meta 标签 : 


<meta name="viewport" content="width=device-width, initial-scale=1, 
shrink-to-fit=no"> 


Bootstrap 采用 “移动 优先 ”的 策略 ， 其 代码 首先 为 移动 端 设备 优化 ， 然 后 再 用 CSS 媒体 查 
询 技 术 来 增加 对 更 大 尺寸 屏幕 的 支持 。 











A 
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2. X-UA-Compatible meta 标签 


X-UA-Compatible 是 男 一 个 应 当 添 加 到 HTML 模板 的 head 区 域 中 的 重要 meta 标签 ， 其 写 





法 如 下 : 


«meta http-equiv="x-ua-compatible" content="ie=edge"> 


该 meta 标签 可 以 强制 Internet Explorer 以 最 新 的 演 染 模式 来 显示 内 容 。 





3. Bootstrap 的 CSS 代码 
除了 上 述 标 签 ， 还 应 当 在 HTML 文档 中 加 载 Bootstrap 的 CSS 代码 。 在 之 前 的 示例 模板 中 ， 























CSS 代码 是 从 CDN 加 载 的 。 也 可 以 将 这 一 CDN URI 替换 成 dist 文件 夹 中 的 本 地 CSS 文件 : 


«link rel="stylesheet" href-"dist/css/bootstrap.min.css"» 


4. JavaScript 文件 
后 ， 应 在 HTML 代码 的 末尾 加 载 JavaScript 文件 ， 从 而 加 速 页 面 的 加 载 。Bootstrap 的 





JavaScript 插件 依赖 jQuery, 因此 在 加 载 这 些 插件 前 需要 先行 加 载 jQuery。 对 于 popover 和 插件 而 
言 ， 除了 jQuery， 它 们 还 依赖 Tether， 因 此 在 加 载 jQuery 后 应 当 立 即 加 载 Tether， 然 后 再 加 载 其 











硬件 文件 。 相 关 的 HTML 代码 的 写法 如 下 : 


<script 
src-"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"»«/script» 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/tether.min.js"> 
</script> 

<script 
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"> 
</script> 


和 CSS 代码 一 样 ， 也 可 用 本 地 的 JavaScript XRRR ERT RS CDN URI, 


1.4 使 用 Bootstrap CLI 














本 书 将 介绍 Bootstrap CLI 。 除 了 使 用 Bootstrap 的 打包 构建 流程 ， 还 可 以 通过 运行 Bootstrap 


CLI 命 令 来 创建 新 项 目 。 








Bootstrap CLI 是 Bootstrap 4 中 的 命令 行 界 面 ， 其 内 置 了 一 些 示 例 项 目 ,， 你 也 可 以 将 它 用 于 自 


己 的 项 目 。 


使 用 Bootstrap CLI 需 安装 以 下 软件 。 


口 Nodejs 0.12+: 可 从 Node.js 官方 网 站 下 载 并 安装 程序 。 
O 安装 Node.js 后 ， 运 行 [sudo] npm install -g grunt bowers 
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O Git: 运行 你 的 电脑 操作 系统 所 对 应 的 Git 安装 程序 。 
口 Windows 用 户 也 可 尝试 使 用 Git for Windows。 

除 Grunt 外 ，Gulp 是 Node.js 体系 中 的 男 一 个 任务 管理 工具 。 如 果 你 偏好 使 用 Gulp， 则 可 运 
行 以 下 命令 来 安装 该 工具 : 


[sudo] npm install -g gulp bower 

















第 2 章 将 详细 介绍 Gulp。 


安装 完 上 述 软件 后 ， 可 以 运行 以 下 命令 ， 通 过 npm 来 安装 Bootstrap CLI: 








npm install -g bootstrap-cli 


该 操作 会 在 操作 系统 中 增加 bootstrap 这 一 命令 


o 


1.5 准备 新 的 Bootstrap 项 目 


安装 好 Bootstrap CLI 后 ， 就 可 以 运行 以 下 命令 来 创建 新 的 Bootstrap 项 目 了 : 





bootstrap new --template empty-bootstrap-project-gulp 





命令 运行 后 ， 会 收 到 询问 “What's the project called? (no spaces)”。 输 入 项 目 名 ， 即 可 创建 出 
一 个 同名 的 文件 夹 。 初 始 化 配置 完成 后 ， 该 项 目 文件 夹 中 的 目录 和 文件 结构 将 如 下 图 所 示 。 














bower components 
bower.json 

etc 

Gulpfile.js 

html 

node modules 
package.json 
README . md 

SCSS 

site 











上 述 项 目 文件 夹 中 包含 了 Gulpfile.js 文件 。 在 第 2 章 中 , 你 将 学 习 如 何 用 Gulp 构建 流程 创建 
自己 的 Bootstrap 项 目 。 

至 此 ， 可 以 运行 Bootstrap 的 watch 命令 ， 同 时 修改 html/pages/index.html 文件 来 观察 效果 。 
该 HTML 模板 文件 是 用 Panini 来 编译 的 。 作 为 平面 文件 编译 工具 , Panini 可 以 帮助 你 创建 出 布局 
一 致 、 文 件 片段 可 复 用 的 HTML 页 面 。 

如 需 了 解 更 多 有 关 Panini 的 信息 ， 可 访问 http://foundation.zurb.com/sites/docs/panini.html。 
































Panini 会 将 HTML 模板 编译 成 单个 的 index.html 文件 ， 就 像 之 前 章节 中 所 描述 的 那样 。 
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1.6 设置 主 结构 元 素 


下 面 开始 准备 页 面 内 容 。 我 们 将 添加 以 下 页 面 元 素 : 


口 包含 logo 和 导航 的 页 头 区 ; 
口 包含 页 面 内 容 的 主 内 容 区 ; 








口 包含 版 权 信息 和 社交 媒体 链接 的 页 脚 区 。 


添加 这 些 内 容 ， 我 们 都 会 基于 最 新 的 HTML5 最 佳 实践 来 做 ， 而 且 会 考虑 ARIA (Accessible 


Rich Internet Applications, 无 障碍 富 互 联网 应 用 ) 的 role 属性 (EI banner, navigation. 





main 和 contentinfo 这 几 个 角色 )。 


运行 bootstrap watch 命令 ， 














浏览 需 将 自动 访问 http://localhost:8080 地 址 。 接 着 ,编辑 














html/pages/index.html 文件 。 你 可 以 使 用 自己 最 喜欢 的 文本 编辑 器 ， 在 该 文件 中 输入 以 下 HTML 


代码 ; 

layout: default 

title: Home 

«header role-"banner"'» 
«nav role-"navigation"» 
«/nav» 

«/header- 


«main role-"main"- 
«h1»Main Heading«/h1» 
«p»Content specific to this 
</main> 


<footer role="contentinfo"> 


page goes here.</p> 


<p><small>Copyright &copy; Company Name</small></p> 


</footer> 








这 就 是 我 们 页 面 的 基本 结构 和 内 容 了 ,继续 往 下 ,值得 注意 的 是 ,刚才 在 html/pages/index.html 








文件 中 所 添加 的 内 容 会 被 编译 到 htm 
了 HTML 主干 结构 以 及 对 编译 好 的 C 
































l/layout/default.html 这 一 布局 模板 中 。 该 模板 包含 
SS 和 JavaScript 代码 的 链接 。 


在 HTML 代码 的 末尾 加 载 JavaScript 代码 ,以 此 来 获取 更 快 的 性 能 .Gulp 会 将 jQuery , Tether 
和 各 种 Bootstrap 所 需 的 jQuery 插件 打包 到 一 个 site/js/app.js 文件 中 。 除 此 之 外 ， 也 可 以 从 CDN 











加 载 jQuery 或 Tether。 


导航 条 标记 


编译 后 的 CSS 代码 已 经 链接 到 编 



































译 后 的 HTML 代码 , 你 也 可 以 在 _site/css 文件 夹 中 找到 。 下 
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面 将 简单 介绍 如 何 用 Sass 定制 CSS。 但 首先 我 们 尝试 将 至 少 一 个 Bootstrap 特有 的 元 素 “ 导 航 条 ” 
放置 到 页 面 中 。 


开始 ， 我 们 只 做 Bootstrap 的 基本 导航 条 ( 稍 后 会 添加 细节 )。 使 用 Bootstrap 文档 中 的 标记 ， 
得 到 如 下 结果 ， 山 套 在 header 元 素 中 : 


«header role="banner"> 
«nav class-"navbar navbar-light bg-faded" role="navigation"> 
«a class-"navbar-brand" href-"index.html"»Navbar«/a» 
«ul class="nav navbar-nav"» 
«li class-"nav-item"» 
«a class-"nav-link active" href="#">Home «span class-"sr- 
only"»-(current)«/span»«/a» 
«/li» 
«li class-"nav-item"-» 
«a class-"nav-link" href="#">Features</a> 





«/li» 
«li class-"nav-item"-» 

«a class-"nav-link" href="#">Pricing</a> 
«/li» 


«li class-"nav-item"-» 
«a class-"nav-link" href="#">About</a> 
«/li» 








«/ul» 
«form class-"form-inline pull-xs-right"-» 
«input class-"form-control" type="text" placeholder-"Search"'» 
«button class="btn btn-success-outline" type-"submit"»Search«/button» 
</form> 
</nav> 
</header> 








保存 结果 , DU 
局 上 也 有 所 增强 ， 这 说 明 CSS EAE, WAR! 





1 览 器 会 自动 刷新 并 显示 Bootstrap 默认 样式 的 导航 条 。 如 下 图 所 示 ， 排 版 和 布 





Navbar Home 


Main Heading 


Content specific to this page goes here. 


Copyright € Company Name 











这 样 我 们 就 配置 好 了 Bootstrap 的 默认 样式 。 
1. 导航 条 所 使 用 的 CSS 类 
如 之 前 的 导航 条 例子 所 示 , 可 以 使 用 <nav>、<a> 和 <ul> 等 标准 的 HTML 元 素 , 配 以 Bootstrap 





Ab Ed 
JH 





role-"navigation"»«/nav» 





初 识 Bootstrap 
色 呈 上 暗色 时 ， 则 应 使 
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首先 观察 以 下 代码 片段 中 <nav> 元 素 所 拥有 的 类 : 
.navbar-light 和 .navbar-dark 类 则 设置 导航 条 中 文字 和 链接 的 颜色 。 当 导航 条 的 
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12 
的 CSS 类 来 创建 导航 条 。 
«nav class-"navbar navbar-light bg-faded" 
.nav 类 会 设置 导航 条 的 基础 样式 。 
色 呈 亮色 时 ， 应 当 使 用 .navbar-light 类 ; 而 当 导 航 条 的 
条 具体 所 采用 的 背景 色 ; 可 供 选 择 的 类 有 .bg-inverse、.bg-faded、 
.bg-primary、 .bg-success、.bg-info、.bg-warning 和 .bg-dangero 这 些 背 景色 类 是 








用 .navbar-dark 类 
最 后 ，.bg-* 类 会 设置 导航 








Bootstrap 所 内 置 的 ， 也 可 月 








日 在 其 他 元 素 和 组 件 上 。 
导航 条 中 的 标题 可 以 由 包含 .navbar-brang 类 的 <a> 元 素 或 <span> 元 素 所 组 成 。 
导航 条 中 具体 的 项 目 则 由 无 序列 表 元 素 (<ul>) 所 组 成 。 在 列表 元 素 内 ,每 个 列表 成 员 (<li>) 
都 会 拥有 .nav-item 这 一 CSS 标签 ， 同 时 包含 一 个 拥有 .navbar-1link 类 的 <a> 元 素 。 对 于 当 
s EA 





前 选中 的 列表 成 员 而 言 ， 除 了 .navbar-1link 外 ， 还 会 包含 .active 2$, 
后 ,在 以 下 导航 条 的 HTML 代码 片段 中 ， 可 以 看 到 .sr-only 25: 








最 
信息 ， 可 访问 http://allyproject.com/posts/how-to-hide-content/。 


条 
<span class="sr-only">(current)</span> 
包含 .sr-only 类 的 HTML 元 素 仅 在 屏幕 阅读 器 中 有 效 。 





多 








并 以 静态 定位 的 方式 出 现在 页 面 中 。 可 以 使 用 一 些 特殊 的 














aD 如 需 了 解 更 

2. 在 页 面 中 放置 导航 条 

默认 情况 下 ， 导 航 条 拥有 圆 角 ， 

CSS 类 ,将 导航 条 固定 在 页 面 顶部 ( .navbar-fixed-top ) 或 底部 ( .navbar-fixed-bottom), 

也 可 移 除 其 圆 角 效果 并 调整 z-index 值 ( .navbar-full ) 接 下 来 , 我 们 将 导航 条 做 成 响应 式 的 。 
通过 这 一 实验 ， 也 可 以 测试 Bootstrap 中 JavaScript 插件 的 运行 结果 。 

借助 Bootstrap 中 的 折 著 插件， 我 们 能 创建 出 可 折 对 内 容 ， 并 可 以 简单 地 用 <a> 标 签 或 
条 

首先 , fE«div class="collapse"> 元 素 内 创建 可 折 羞 内容 ， 并 对 该 元 素 赋 予 唯 一 的 ID. 




















3. 在 导航 条 中 添加 可 折 双 内容 








<button> 标 签 显示 或 隐藏 内 容 。 同 时 ， 还 可 以 在 导航 条 中 添加 这 一 切换 按钮 。 


具体 写法 如 下 : 
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<div class="collapse" id="collapsiblecontent"> 
Collapsible content 
</div> 











然后 ， 创建 拥有 .navbar-toggler 类 和 data-toggle, data-target 属性 的 按钮 ， 具体 
写法 如 下 : 

<button class="navbar-toggler" type="button" data-toggle="collapse" data- 

target="#collapsiblecontent"> 

&#9776; 

; «/button» 

在 以 上 代码 片段 中 ，qata-toggle 属性 应 当 设置 为 collapse， 以 触发 折 友 插件 功能 ; 而 
data-target 属性 则 应 指向 刚 创 建 的 可 折 双 内容 的 唯一 ID。HTML 代码 中 的 gs#9776 表示 汉堡 
图 标 ， 在 页 面 上 会 显示 成 以 下 样式 。 

















现在 将 这 些 代 码 写 在 一 起 ， 并 把 按钮 放 在 导航 条 中 。 在 html/pages/index.html 文件 中 编写 以 
下 HTML 代码 ， 即 可 在 浏览 器 中 看 到 效果 : 


<header> 
<div class="collapse" id="collapsiblecontent"> 
Collapsible content 
</div> 
«nav class-"navbar navbar-light bg-faded" role="navigation"> 
«button class-"navbar-toggler" type-"button" data-toggle-"collapse" data- 
target-"i4collapsiblecontent"'-» 








«/button» 
«/nav» 
«/header» 


如 果 Bootstrap 的 watch 命令 还 在 运行 ， 浏 览 器 应 当 会 自动 刷新 。 结 果 如 下 图 所 示 。 





Main Heading 


Content specific to this page goes here. 








Copyright © Company Name 





点 击 汉 堡 图 标 , 可 折 闭 内 容 就 会 显示 出 来 。 如 果 这 一 行为 符合 预期 就 表明 折 炙 插件 工作 正 
除 此 之 外 ， 折 芋 持 件 还 能 用 来 制作 响应 式 的 导航 条 ， 下 一 节 将 对 此 进行 详细 介绍 
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默认 情况 下 ，.collapse 元 素 中 的 内 容 是 被 隐藏 的 。 点 击 切换 按钮 后 ， 折 释 插 件 会 在 该 元 
素 上 添加 .in 类 ， 从 而 使 内 容 显示 出 来 。 为 了 让 显示 /隐藏 的 过 程 顺 畅 ， 插 件 还 会 添加 一 个 临时 
的 .collapsing 类 来 实现 动画 效果 。 


4. 响应 式 与 断 点 


默认 情况 下 ，Bootstrap 中 的 断 点 有 4 个 : 544, 768, 992 和 1200 像素 。 围 绕 这 些 断 点 ， 设 
计 将 适 配 具体 的 设备 和 不 同 尺 寸 的 浏览 器 视 口 。 与 此 同时 , Bootstrap 中 移动 优先 的 响应 式 网 格 也 
会 用 到 这 些 断 点 。 本 书 稍 后 将 详细 介绍 网 格 。 


可 以 使 用 这 些 断 点 来 指定 和 命名 视 口 的 大 小 范围 : 超 小 ( xs ) 表示 视 口 宽度 小 于 544 像素 的 
手机 端 竖 屏 模式 ， 小 ( sm ) 表示 视 口 宽度 小 于 768 像素 的 手机 端 横 屏 模式 ， 中 等 (ma ) 表示 视 
口 宽度 小 于 992 像素 的 平板 设备 ， 大 (1g ) 表示 视 口 宽度 大 于 992 像素 的 桌面 设备 ， 超 大 (x1) 
表示 视 口 宽度 大 于 1200 像素 的 桌面 设备 。 由 于 视 口 大 小 的 像素 值 与 页 面 中 的 字体 大 小 无 关 ， 且 
现代 浏览 器 普 遍 修 复 了 缩放 所 带 来 的 问题 ， 因 此 这 些 断 点 以 像素 为 单位 。 


有 不 同意 见 认为 ， 断 点 以 em 为 单位 会 更 好 。 























«p 如 需 了 解 更 多 信息 ， 可 访问 http;//zellwk.com/blog/media-query-units/ , 





局 好 使 用 em 作为 断 点 单位 的 人 ， 可 以 修改 scss/includes/_variables.scss 文件 中 所 声明 的 
$grid-breakpoints 变量 。 如 果 使 用 em 值 作为 媒体 查询 的 度量 ， 则 相关 SCSS 代码 的 写法 
如 下 : 


$grid-breakpoints: ( 
// 超 小 屏幕 / 手机 
xs: 0, 
// 小 屏幕 / 手机 
sm: 34em, // 544px 
// 中 型 屏幕 / 平板 
md: 48em, // 768px 
// 大 屏幕 / 桌面 设备 
lg: 62em, // 992px 
// 超大 屏幕 / 宽屏 桌面 设备 
xl: 75em //1200px 

y 


除 此 之 外 ， 应 修改 scontainer-max-widths 变量 声明 。 修 改 Bootstrap 变量 的 操作 应 yj: 
通过 人 uc Mia 文件 来 实现 ， 具 体 解 释 可 参考 http://bassjobsen.weblogs. 


fm/preserve settings and customizations when updating bootstrap/。 如 此 操作 可 以 避免 Bootstrap 
版 本 更 新 对 本 地 修改 的 意外 覆 写 。 
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5. 响应 式 工具 类 m 


Bootstrap 中 预定 义 了 一 些 工具 类 ,用 以 加 速 开发 对 移动 端 设 备 友 好 的 产品 ,可 以 使 用 这 些 类 ， 
通过 媒体 查询 技术 在 不 同 设备 和 不 同 大 小 的 视 口 中 显示 /隐藏 内 容 。 


VJ .nidden-*-up 类 为 例 ， 其 中 * 代 表 某 个 断 点 的 名 称 ， 该 类 可 在 所 有 设备 视 口 宽度 大 于 指 
定 断 点 的 情况 下 隐藏 相关 的 内 容 。 如 ，.hiaaen-mdqa-up 类 会 在 中 型 视 口 、 大 视 口 和 超大 视 口 的 
情况 下 隐藏 某 个 元 素 ; 与 之 相反 ，.hidden-md-down 则 会 在 视 口 宽度 小 于 断 点 的 情况 下 隐藏 某 
个 元 素 。 


也 可 以 通过 Sass 混入 的 方式 来 使 用 Bootstrap 的 媒体 查询 范围 和 上 断 点 .混和 人 media-breakpoint- 
up () 接受 断 点 名 称 作 为 输入 参数 , 用 于 设置 min-wiqath 这 一 媒体 查询 规则 。 在 该 规则 下 ， 相 关 
的 CSS 内容 仅 在 视 口 宽度 大 于 断 点 的 情况 下 才 生 效 , 与 之 相反 ,混入 media-breakpoint-down () 
用 于 设置 max-width 规则 ， 相 关 的 CSS 内 容 仅 在 视 口 宽度 小 于 断 点 的 情况 下 有 效 。 


对 于 以 下 可 写 在 scss/app.scss 文件 末尾 的 SCSS 代码 而 言 : 


pí 
font-size: 1.2em; 
Ginclude media-breakpoint-up(md) ( 
font-size: lem; 
} 
} 


该 SCSS 代码 会 被 编译 成 以 下 CSS 内 容 : 
pl 


font-size: 1.2em; 


} 






































@media (min-width: 768px) { 
p { 
font-size: lem; 
} 
} 


6. 完成 响应 式 导 航 条 

为 了 在 Bootstrap 响应 式 导 航 条 基础 上 完成 我 们 的 导航 条 ， 还 得 增加 两 个 新 元 素 ， 以 及 相应 
的 类 和 data 属性 。 

先 在 之 前 的 导航 条 代码 中 添加 切换 按钮 。 该 按钮 的 HTML 代码 如 下 所 示 : 


«button class-"navbar-toggler hidden-md-up pull-xs-right" type-"button" 
data-toggle-"collapse" data-target-"icollapsiblecontent"'-» 





«/button» 
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从 以 上 HTML 代码 可 以 看 到 ， 响 应 式 导 航 条 组 件 也 会 用 到 折 释 插件 ， 因 此 和 之 前 可 折 县 内 
容 中 的 例子 一 样 ， 该 按钮 也 拥有 相同 的 aata 属性 。 此 外 ， 该 按钮 有 一 个 .hidden-md-up 工具 
类 ( 如 之 前 描述 )， 用 于 在 视 口 宽度 大 于 768 像素 的 情况 下 隐藏 按钮 。.pull-xs-right 类 则 在 
移动 设备 上 让 按钮 浮动 于 导航 条 的 右 侧 。 


然后 ， 添 加 需要 折 又 的 元 素 的 类 。 在 本 例 中 ,需要 折 符 的 是 含 导 航 链接 的 <ul> 元 素 。 在 该 
元 素 上 添加 .collapse 类 ， 使 得 元 素 默 认 处 于 隐藏 状态 ; 同时 添加 .navbar-toggleable-sm 
类 ， 避 免 在 视 口 较 大 的 设备 上 发 生 内 容 的 折 和 县 。 最 后 ， 将 元 素 的 ID 值 设 为 刚才 按钮 元 素 的 
data-target 属性 值 。HTML 代码 如 下 : 


«ul class-"nav navbar-nav navbar-toggleable-sm collapse" 
ide"collapsiblecontent"'»«/ul» 


完整 的 响应 式 导 航 条 的 HTML 代码 如 下 。 你 可 以 将 该 代码 写 到 html/pages/index.html 文件 中 ， 
并 在 浏览 器 中 测试 : 


«header role-"banner"'» 
«nav class-"navbar navbar-light bg-faded" role-"navigation"- 
«a class-"navbar-brand" href-"index.html"»Navbar«/a-» 
«button class-"navbar-toggler hidden-md-up pull-xs-right" type-"button" 
data-toggle-"collapse" data-target-"ftcollapsiblecontent'-» 




















«/button» 
«ul class-"nav navbar-nav navbar-toggleable-sm collapse" 
id-z"collapsiblecontent'-» 
«li class-"nav-item"- 
«a class-"nav-link active" href="#">Home «span class-"sr- 
only"»-(current)«/span»«/a» 
«/li» 
«li class-"nav-item"- 
«a class-"nav-link" href="#">Features</a> 
«/li» 
«li class-"nav-item"- 
«a class-"nav-link" href-"i$"»Pricing«/a» 
«/li» 
«li class-"nav-item"- 
«a class-"nav-link" href="#">About</a> 
«/li» 
«/ul» 
</nav> 
</header> 


随 着 Bootstrap 版 本 的 更 新 ， 标 签 结构 、CSS 类 名 和 data 属性 可 能 会 发 生变 化 。 
D 如 果 以 上 代码 行 不 通 ， 可 以 查看 Bootstrap 的 官方 文档 。 作 为 备 选 方案 ， 可 以 基 
于 本 书 提 供 的 示例 代码 来 创建 项 目 。 


默认 情况 下 ，.navbar-brand 和 .nav-link CSS 类 中 会 定义 float :left 规则 。 对 于 可 
折 和 二 版 本 的 导航 条 来 说 ， 导 航 链接 不 应 出 现 浮 动 ， 因 此 需 撤销 浮动 操作 。 可 以 在 scss/app.scss X 
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件 的 末尾 添加 以 下 SCSS 代码 ， 在 小 型 视 口 中 移 除 浮 动 。 


.navbar { 
Ginclude media-breakpoint-down(sm) ( 
.navbar-brand, 
.nav-item ( 
float: none; 
} 
) 
} 





如 果 Bootstrap 的 watch 命令 还 在 运行 ， 则 浏览 器 会 在 HTML 或 Sass 代码 保存 后 自动 刷新 ; 


否则 的 话 ， 再 次 启动 watch 命令 ， 在 浏览 器 中 访问 http://localhost:8080/28 8/4 





点 击 和 拖 卡 来 调整 浏览 器 窗口 的 大 小 ， 使 其 宽度 窄 于 768 像素 。 














吉 果 。 通 过 鼠标 





如 果 一 切 运行 正常 ,就 能 看 到 如 下 图 所 示 的 可 折 欠 导航 条 ,其 中 包含 了 网 站 名 称 、logo 和 切 


换 按钮 。 





Navbar 


Main Heading 


Content specific to this page goes here. 


Copyright © Company Name 














好 兆头 ! 点 击 切换 按钮 ， 导 航 条 会 下 滑 打 开 ， 结 果 如 下 图 所 示 。 


Navbar |=] 


Home 





Main Heading 


Content specific to this page goes here. 


Copyright © Company Name 











搞定 ! 祝贺 你 ! 
7. 新 的 Reboot 模块 和 Normalize.css 
说 起 CSS 的 级 联 特性 ， 就 不 得 不 提 到 ， 浏 览 器 的 默认 样式 要 优先 于 开发 者 








局 好 的 样式 。 换 
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而 言 之 ,除非 开发 者 显 式 声明 ， 否 则 浏览 需 会 以 自 带 的 默认 样式 来 泻 当 内容 。 不 同 的 浏览 需 所 自 
带 的 默认 样式 各 不 相同 ， 而 这 也 是 造成 浏览 器 兼容 性 问题 的 主要 原因 。 为 避免 类 似 的 麻烦 ,可 以 
重 置 CSS 或 HTML， 即 由 开发 者 将 常用 的 HTML 元 素 设置 默认 的 样式 ， 从 而 杜绝 由 浏览 器 默认 
样式 所 造成 的 问题 ， 同 时 保证 HTML 元 素 在 不 同 的 浏览 器 上 呈现 出 相同 的 效果 。 





























Bootstrap 使 用 由 Nicholas Galagher 所 编写 的 Normalize.css。 这 是 一 个 适用 HTMLS5 的 现代 CSS 
重 置 工具 ， 可 以 从 http://necolas.github.io/normalize.css/ 下 载 。 使 用 该 工具 后 ,不同 的 浏览 器 对 
HTML 元 素 的 显示 效果 会 更 加 一 致 , 且 符合 现代 标准 。Normalize.css 和 其 他 一 些 样 式 规则 组 成 了 
Bootstrap 中 新 的 Reboot 模块 。 











8. box-sizing 


Reboot 模块 会 从 全 局 层面 将 box-sizing 值 从 默认 的 content-box 改 为 border-box。 
box-sizing 是 CSS 盒 模型 中 用 于 计算 某 个 元 素 宽 高 的 属性 。 事 实 上 ，box-sizing 并 不 是 CSS 中 的 
新 内 容 ， 但 将 其 设置 为 porder-box 可 以 让 工作 轻松 很 多 。 设 置 为 porder-box 后 ， 计 算 元 素 
的 宽度 时 会 将 其 边框 和 内 边 距 也 包括 在 内 。 如 此 一 来 , 对 元 素 边框 或 内 边 距 的 调整 就 不 会 影响 到 
整体 的 布局 了 。 


9. 预 置 CSS 类 
Bootstrap 中 预 置 的 CSS 类 包罗 万 象 。 只 用 aiv 元 素 ， 配 以 正确 的 网 格 类 ， 即 可 在 项 目 中 开 


发 出 移动 优先 的 响应 式 网 格 。 与 此 同时 ， 也 可 以 用 CSS 类 给 其 他 元 素 和 组 件 定制 样式 。 对 于 以 
下 HTML 代码 中 的 按钮 样式 来 说 : 


<button class="btn btn-warning">Warning!</button> 


按钮 显示 在 页 面 上 会 如 下 图 所 示 。 


可 以 看 到 ，Bootstrap 使 用 两 个 类 来 定制 按钮 的 样式 。 第 一 个 .ptn 类 使 元 素 具有 通用 的 按钮 
布局 样式 。 第 二 个 .btn-warning 类 则 对 按钮 设置 定制 的 颜色 。 
CSS 中 的 子囊 属性 选择 符 可 以 部 分 匹配 属性 的 值 。 比 如 ， 可 以 匹配 所 有 class 值 
以 btn- 开 头 的 元 素 。 你 或 许 会 疑惑 : 为 什么 Bootstrap 不 用 [class^='btn-'] 
0 属性 选择 符 ， 而 要 用 .btn 类 来 设置 按钮 的 通用 样式 呢 ? 原因 有 两 点 。 首 先 ， 有 
意见 表明 子 串 属性 选择 符 性 能 不 佳 ， 因 此 Bootstrap 会 避免 使 用 该 技术 。 其 次 ， 
[class^='btn-'] 不 会 匹配 not. btn- 的 情况 。 


除了 <button> 标 签 ， 也 可 以 用 这 些 类 将 超 链接 <a> 显 示 成 按钮 的 样子 : 


«a class="btn btn-primary" href="#" role-"button"»Link«/a» 
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10. Sass 变量 和 混入 


可 以 通过 修改 scss/_variabels.scss 文件 中 的 Sass 变量 来 改变 Bootstrap 的 默认 样式 。 例如, 将 
sbrand-primary 变量 设置 为 别 的 颜色 , 即 可 改变 之 前 例子 中 含 .btn-primary 类 的 按钮 的 样子 。 


也 可 以 通过 Bootstrap 中 的 Sass 混入 ， 用 自己 定制 的 Css 类 来 扩展 Bootstrap。 除 了 用 Sass 
混入 和 变量 来 构建 自己 的 (语义 ) 网 格外 ， 还 可 以 用 它们 来 创建 自己 的 按钮 类 ， 如 以 下 SCSS 代 
人 码 所 示 。 

.btn-tomato { 


Ginclude button-variant(white, tomato, white); 
} 


该 SCSS 代码 会 被 编译 为 以 下 CSS 代码 : 


.btn-tomato { 
color: white; 
background-color: tomato; 
border-color: white; 





} 
.btn-tomato:hover { 
color: white; 
background-color: $9ff3814; 
border-color: #e0e0e0; 
} 
.btn-tomato:focus, .btn-tomato.focus { 
color: white; 
background-color: #ff3814; 
border-color: #e0e0e0; 
} 
.btn-tomato:active, .btn-tomato.active, 
.open > .btn-tomato.dropdown-toggle { 
color: white; 
background-color: #ff3814; 
border-color: #e0e0e0; 
background-image: none; 


.btn-tomato:active:hover, .btn-tomato:active:focus, 
.btn-tomato:active.focus, .btn-tomato.active:hover, 
.btn-tomato.active:focus, .btn-tomato.active.focus, 
.open > .btn-tomato.dropdown-toggle:hover, 
.open » .btn-tomato.dropdown-toggle:focus, 
.open » .btn-tomato.dropdown-toggle.focus ( 
color: white; 
background-color: #ef2400; 
border-color: #bfbfbf; 
} 
.btn-tomato.disabled:focus, .btn-tomato.disabled.focus, 
.btn-tomato:disabled:focus, .btn-tomato:disabled.focus { 
background-color: tomato; 
border-color: white; 
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j 

.btn-tomato.disabled:hover, .btn-tomato:disabled:hover { 
background-color: tomato; 
border-color: white; 


} 


Bootstrap 中 的 Sass 代码 会 避免 使 用 元 素 选择 符 和 骸 套 选择 符 ， 其 背后 的 考量 可 以 参考 
http://markdotto.com/2015/07/20/css-nesting/ o 




















Bootstrap 还 会 避免 使 用 Sass 中 的 aextena 功能 。 使 用 aextena 功能 的 风险 在 于 它 可 能 会 引 
入 复杂 的 CSS 宛 余 代码 。 有 具体 情况 可 参考 Hugo Giraudel 的 文章 ( https://www.sitepoint.com/ 
avoid-sass-extend/ )。 





使 用 临时 选择 符 能 有 效 降低 这 一 风险 。Bootstrap 代码 中 不 会 使 用 临时 选择 符 , 不 过 这 并 不 影 
啊 你 用 eextend 功能 来 定制 和 扩展 Bootstrap。 比 如 ， 可 以 用 @exteng 功能 让 所 有 的 图 片 元 素 默 
认 具 备 响应 式 特性 。 


在 Bootstrap 中 图 片 元 素 默认 是 不 具备 响应 式 特性 的 。 让 一 张 图 片 变 成 响应 式 的 话 ， 需 要 在 
<img> 元 素 上 添加 .img-fluia 类 。 




















可 以 在 scss/app.scss 文件 的 末尾 添加 以 下 SCSS 代码 ， 用 @exteng 功能 让 图 片 默认 具备 响应 
式 特性 : 
img ( 


Gextend .img-fluid; 
j 


THE T eextena, 有 些 人 可 能 认为 使 用 混 人 是 更 好 的 选择 。 但 应 该 看 到 , Æ Bootstrap 的 Sass 
代码 中 ， 并 不 存在 让 图 片 变 成 响应 式 的 混入 操作 。 














1.7 浏览 器 支持 


之 前 提 到 ，Bootstrap 4 不 支持 IES 及 之 前 的 正 浏 览 器 。 对 于 需要 支持 IE8 的 项 目 来 说 ， 建 议 
使 用 Bootstrap 3。Bootstrap 4 还 提供 Flexbox 支持 。 需 要 注意 的 是 ， 对 于 下 浏览 器 而 言 ，CSS3 
中 的 弹性 盒 模型 布局 ( Flexbox ) 仅 在 正 11 及 之 后 的 版 本 中 有 效 。1.7.2 节 将 介绍 Flexbox 的 优 劣 。 
除了 IE8 及 之 前 的 老 版 本 浏览 句 ,Bootstrap 对 包括 移动 浏览 器 在 内 的 所 有 主流 浏览 器 均 提 供 文 持 。 























1.7.1 浏览 器 引擎 前 组 


CSS3 引入 了 浏览 器 引擎 规则 。 开 发 者 可 以 使 用 这 些 规 则 编写 仅 适 用 于 某 个 浏览 器 的 CSS fV 
码 。 乍 一 看 ， 这 人 么 做 有 违 初 袁 。 理 想 情况 下 ， 所 有 的 浏览 需 都 能 以 相同 的 方式 支持 Web 标准 和 
相关 实践 ， 而 HTML 和 CSS 也 能 在 所 有 的 浏览 器 上 显示 相同 的 结果 。 但 事实 上 ， 这 些 浏 览 器 引 
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擎 前 级 反而 能 让 我 们 离 理 想 更 近 一 步 ， 让 我 们 在 标准 实现 的 早期 就 能 用 上 新 的 语法 规则 。 最 后 ， 
些 前 级 还 能 让 浏览 器 实现 私有 的 CSS 属性 ， 而 这 些 属性 在 正常 情况 下 是 不 太 可 能 ( 甚至 永远 
没有 可 能 ) 成 为 标准 的 。 
由 于 以 上 原因 ， 浏 览 器 引擎 前 组 在 很 多 新 的 CSS3 特性 中 扮演 了 重要 的 角色 ， 比 如 : 动画 、 
圆 角 、 阴 影 等 属性 ， 这 些 属 性 过 去 都 曾 依赖 于 浏览 器 引擎 前 缀 规则 。 可 以 看 到 ， 有 些 属性 会 从 引 
擎 前 级 进化 成 标准 规则 ， 比 如 border-radius 和 box-shadow 属性 ， 都 被 现 如 今 的 绝 大 多 数 
浏览 右 所 支持 ， 无 须 添加 任何 前 级 。 
浏览 右 引 苟 前 级 包括 : 
D WebKit: -webkit 
ū Firefox: -moz 


ū Opera: -o 
B Internet Explorer: -ms 


对 于 以 下 CSS 代码 来 说 : 


transition: all .2s ease-in-out; 


如 需 在 所 有 的 浏览 器 上 正常 工作 ， 或 者 至 少 在 Bootstrap 所 支持 的 浏览 器 上 正常 工作 ， 则 需 
写成 ， 


-webkit-transition: all .2s ease-in-out; 
-o-transition: all .2s ease-in-out; 
transition: all .2s ease-in-out; 


如 需 了 解 更 多 有 关 transition 属性 及 其 浏览 器 支持 方面 的 信息 , 可 以 访问 http://caniuse.com/ 
ffeat-css-transitions s 

由 于 浏览 器 及 其 版 本 的 不 同 ， 相 同 的 CSS 属性 可 能 会 对 应 很 多 不 同 的 引擎 前 级， 因此 编写 
BA aU CSS 代码 就 会 变 得 非常 复杂 。 
编译 成 CSS 代码 的 Bootstrap 中 的 Sass 代码 不 包含 任何 前 级 。 事实 上 ，Bootstrap 的 构建 流程 
中 包含 了 PostCSS autoprefixer。 当 创建 自己 的 构建 流程 时 ， 也 应 将 PostCSS autoprefixer 这 一 
工具 包含 在 内 。 第 2 章 将 介绍 如 何 用 Gulp 来 创建 构建 流程 。 
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1.7.2 ”弹性 盒 模型 


根据 需要 ，Bootstrap 4 还 提供 Flexbox 支持 。Flexbox 布局 是 CSS3 的 一 个 新 特性 。 在 编写 灵 
活 的 响应 式 布局 时 非常 有 用 。Flexbox 提供 了 在 不 同 的 屏幕 分 辨 率 下 动态 改变 页 面 布 局 的 功能 。 
该 盒 模型 不 使 用 浮动 , 同时 其 外 边 距 也 不 会 随 内 容 塌 缩 。 所 有 最 新 版 本 的 主流 浏览 器 都 很 好 地 支 
持 Flexbox 布局 。 
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有 关 浏 览 器 支持 的 详情 ， 可 以 访问 http:///caniuse.com/Zfeat-flexbox., 348 85€ , 
很 多 旧版 本 的 浏览 器 不 支持 Flexbox 布局 。 


如 需 使 用 Flexbox 布局 , 则 应 将 Sass 变量 Senable-flex KEN true 并 重新 编译 Bootstrap。 
在 该 操作 后 ， 无 须 修改 已 有 的 HTML 代码 。 











1.8 Yeoman 工作 流 
Yeoman 可 以 帮助 开发 人 员 启 动 新 的 项 目 ， 你 可 以 使 用 它 来 替代 Bootstrap CLI- 


Yeoman 工作 流 中 包含 了 3 种 工具 ， 可 以 用 来 提升 创建 Web 应 用 时 的 效率 和 质量 : 脚手架 工 
H (yo) WETA (Grunt 和 Gup 等 )， 以 及 包 管 理 吉 (如 Bower 和 npm )。 























可 以 访问 https:/github.com/bassjobsen/generator-bootstrap4， 从 中 找到 搭建 Bootstrap 4 前 端 
Web 应 用 的 Yeoman 脚手架 。 在 安装 Yeoman 后 ， 可 以 通过 运行 以 下 命令 ， 安 装 脚手架 工具 。 








D 安装 : npm install -g generator-bootstrap4; 
口 运行 : yo bootstrap4; 
口 运行 grunt 构建 代码 ， 然 后 运行 grunt serve 预览 结果 。 





























这 一 生成 Bootstrap 项 目的 Yeoman 工具 让 开发 人 员 可 以 安装 具有 Flexbox 支持 的 代码 。 它 还 
能 在 Web 应 用 中 安装 Font Awesome 和 Octicons 字体 图 标 库 以 直接 使 用 。 











$ yo bootstrap4 


'Allo 'allo! Out of the 
box I include Bootstrap 
4，jQuery，and a 
Gruntfile to build your 





Would you like to enable fLexbox (reduced browser and device support)? 


1.9 HEB 
如 果 不 顺利 ， 可 以 再 检查 一 遍 以 下 事项 : 
a 你 的 标记 结构 是 否 正确 ”有 没有 未 闭合 、 不 完整 或 错 配 的 标签 、 类 ， 等 等 
另外 ， 下 面 这 些 事项 也 可 能 有 用 : 
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口 把 前 面 的 步骤 从 头 到 尾 再 过 一 遍 ， 复 核 各 项 ; 

口 验证 HTML 保证 格式 正确 ; 

口 比较 本 书 示例 代码 和 自己 的 代码 ; 

口 参考 Bootstrap 文档 ， 看 相关 标签 结构 和 属性 是 否 有 更 新 ; 
O 把 你 的 代码 放 到 http://jsfiddle.net/ 或 http:/www.codepen.com/ 上， 到 |] http://stackoverflow. 
com/ 上 寻找 高 手 帮 助 。 


把 那么 多 部 件 合 到 一 起 ,让 它们 协作 运行 ， 出 点 问题 很 正常 。 而 学 会 找到 问题 并 解决 问题 同 
样 是 我 们 的 生存 之 道 ! 

Bootply 是 一 个 用 于 实验 Bootstrap , CSS , JavaScript 和 jQuery 的 小 工具 ,可 以 用 来 测试 HTML 
代码 。 虽 然 不 能 直接 在 Bootply 上 编译 CSS， 但 可 以 添加 自己 编译 好 的 CSS 代码 。 



















































































QD Bootply 的 官网 地 址 为 : http//www.bootply.com/. 





我 们 的 网 站 模板 已 经 基本 完成 了 。 在 继续 学 习 之 前 ， 先 停 下 来 总 结 一 下 


1.10 小结 


如 果 大 家 一 直 跟 着 前 面 的 教程 在 做 , 那 现在 已 经 为 继续 实现 更 高 级 的 设计 打 好 了 基础 。 我 们 
学 习 了 创建 新 的 Bootstrap 4 项 目 所 需 的 基础 。 可 以 轻松 地 用 Bootstrap CLI 来 新 建 一 个 项 目 ， 并 
用 JavaScript 的 折 和 县 插件 做 出 响应 式 的 导航 条 。 在 学 习 如 何 将 Bootstrap 的 Sass 代码 编译 成 CSS 
代码 后 ， 我 们 对 Bootstrap 中 的 CSS 和 HTML 代码 ， 以 及 相关 的 浏览 器 支持 有 了 更 好 的 理解 。 


























qp 现在 ， 或 许 把 所 有 文件 都 备份 一 下 比较 好 ， 因 为 后 面 的 项 目 都 以 它们 为 基础 。 





在 下 一 章 中 ,我 们 将 学 习 如 何 用 Gulp 打造 自己 的 构建 流程 ， 并 自动 编译 项 目 。 

















用 Gulp 打造 自己 的 构建 流程 











本 章 将 介绍 如 何 为 Bootstrap 项 目 搭建 自己 的 构建 流程 。Bootstrap 的 CSS 是 用 Sass 编写 的 ， 
所 以 如 果 不 使 用 预 编译 好 的 CSS 代码 的 话 ， 就 需要 自行 完成 编译 工作 。 将 Sass 代码 编译 成 CSS 
需要 使 用 Sass 编译 器 。 


与 此 同时 ，Bootstrap 中 的 JavaScript 搬 件 在 交付 生产 环境 使 用 前 ， 也 应 当 被 打包 和 压缩 。 
阅读 完 本 章 ， 你 将 学 会 : 


口 用 Gulp 搭建 构建 流程 ; 

口 在 构建 流程 中 设置 不 同 的 环境 ; 

O 将 Sass 代码 编译 成 CSS 代码 ; 

a 在 CSS 代码 中 自动 加 入 引擎 前 绥 ; 

口 为 项 目 准 备 JavaScript 插件 ; 

O 运行 静态 Web 服务 器 ; 

口 测试 代码 ; 

口 使 用 标准 的 Bootstrap 组 件 ， 并 根据 需要 进行 修改 ; 
口 用 Bootstrap 创建 简单 的 单 页 面 营销 网 站 ; 

口 在 GitHub 上 发 布 项 目 。 







































































2.1 开发 目标 

在 本 章 中 ， 你 将 针对 示例 项 目 打造 构建 流程 。 该 流程 不 仅 会 处 理 CSS 和 JavaScript 代码 ， 同 
时 也 会 运行 静态 Web 服务 器 ， 在 浏览 絮 测 试 中 当 文 件 内 容 有 所 修改 时 它 会 自动 刷新 浏览 器 ， 还 
会 测试 项 目 代 码 ， 等 等 。 


我 们 将 创建 一 个 用 Bootstrap 做 的 单 页 面 营销 布局 ， 作 为 示例 项 目 来 演示 构建 流程 中 的 各 个 
步骤 。 本 章 结束 时 ， 你 将 开发 出 自己 的 HTML 网 页 ， 其 显示 结果 如 下 图 所 示 。 
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YourCompany 


Hello, world! 


This is a simple hero unit, a simple jumbotron-styli 
information. 


It uses utility classes for typography and spacing to space content outwithii 
- 


Learn more 





Heading Heading Heading 
Donec sed odio dui. Etiam porta sem malesuada Duis mollis, est non commodo luctus, nisi erat Donec sed odio dui. Cras justo odio, dapibus ac 
magna mollis euismod. Nullam id dolor id nibh porttitor ligula, eget lacinia odio sem nec elit. facilisis in, egestas eget quam. Vestibulum id 
ultricies vehicula ut id elit. Morbi leo risus, porta Cras mattis consectetur purus sit amet ligula porta felis euismod semper. Fusce 
ac consectetur ac, vestibulum at eros. Praesent fermentum. Fusce dapibus, tellus ac cursus dapibus, tellus ac cursus commodo, tortor mauris 
commodo cursus magna. commodo, tortor mauris condimentum nibh. condimentum nibh, ut fermentum massa justo sit 


amet risus. 


View details » View details » 
View details » 











项 目 要 求 


Node js 是 基于 Chrome 的 V8 JavaScript 引擎 所 开发 的 JavaScript 运行 时 环境 。 它 使 用 事件 
驱动 的 非 阻塞 输入 /输出 模型 ， 是 非常 高 效 的 轻 量 级 工具 。 你 需要 在 自己 的 系统 中 安装 Nodejs， 


方 能 运行 本 章 中 的 示例 代码 。 可 以 访问 https://nodejs.org/en/download/ 下 载 Node.js 源 代码 或 适合 
你 的 平台 的 安装 文件 。 在 Linux, Mac OS X fll Windows 上 ，Node.js 均 能 良好 地 运行 。 


npm 是 Node.js 的 包 管理 器 ， 在 安装 Node.js 时 会 自动 安装 


在 安装 好 Node.js 和 npm 后 , 还 应 当 以 系统 全 局 的 模式 安装 Gulp。 可 以 运行 以 下 命令 , 安装 
Gulp: 












































npm install --global gulp-cli 
Gulp 是 什么 ? 为 什么 要 使 用 Gulp? 


Gulp Æ Node.js 中 的 一 个 任务 管理 器 ， 可 用 来 打造 构建 系统 。 在 该 构建 系统 中 ， 可 以 轻松 地 
添加 编辑 、 复 制 等 自动 化 任务 。 与 此 同时 ， 还 能 用 Gulp 来 监听 事件 。 当 发 生 文 件 修 改 ， 触 发 这 
些 事件 时 ， 构 建 系统 中 的 任务 会 自动 重新 运行 。Bootstrap 中 的 CSS 代码 是 用 Sass 来 编写 的 ， 你 
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也 可 以 使 用 Gulp 将 自己 的 Sass 文件 编译 成 静态 CSS 代码 。 编 译 完成 后 , 还 可 以 通过 构建 任务 来 
处 理 CSS 代码 。 


本 章 稍 后 还 会 介绍 用 Gulp 测试 代码 、 进 行 静态 检查 ， 以 及 压缩 和 优化 代码 ， 从 而 适 配 生产 
环境 的 要 求 。 代 码 静 态 检 查 ( lint ) 的 意思 是 通过 运行 程序 来 分 析 代码 ， 从 而 找到 潜在 的 错误 。 





























2.2 Bootstrap 构建 流程 


Bootstrap 的 软件 包 中 自 带 了 构建 流程 。 写 作 本 书 时 ，Bootstrap 构建 流程 是 用 Grunt 编写 的 。 
使 用 该 流程 可 以 编译 生成 定制 的 Bootstrap 版 本 , 同时 在 本 地 运行 相关 文档 。 和 Gulp 类 似 ，Grunt 
也 是 Node.js 中 的 任务 管理 器 。 和 Gulp 不 同 的 是 ，Grunt 在 构建 过 程 中 不 使 用 流 ， 而 是 将 临时 代 
码 保存 成 文件 。 


在 Bootstrap 源 代码 的 Gruntfile.js 文件 中 , 包含 着 Grunt 构建 流程 中 的 一 系列 任务 。 可 以 参考 
该 文件 ， 理 解 使 Bootstrap 代码 适用 于 生产 环境 的 相关 任务 。 

与 Grunt 相 比 ，Gulp 更 直观 ， 也 更 易 人 门 ， 因 此 本 章 将 用 Gulp 来 替代 Grunts Gulp HE Grunt 
出 现 得 更 晚 ， 但 其 社区 发 展 得 很 快 ， 每 天 都 有 新 的 搬 件 发 布 。 


最 后 ， 需 要 注意 的 是 ， 虽 然 像 Gulp 和 Grunt 这 样 的 任务 管理 需 可 以 让 工作 变 得 更 加 轻松 ， 
但 对 于 在 Node.js 中 运行 任务 而 言 ， 它 们 并 不 是 必需 品 。 










































































2.3 在 项 目 中 安装 Gulp 
在 继续 介绍 前 ， 我 们 需要 运行 以 下 命令 ， 初 始 化 npm: 


npm init 
如 下 图 所 示 ， 回 答 该 命令 执行 过 程 中 所 提出 的 问题 。 


$ npm init 
This utility will walk you through creating a package.json file. 
It only covers the most common items, and tries to guess sensible defaults. 


See ‘npm help json' for definitive documentation on these fields 
and exactLy what they do. 


Use ‘npm install <pkg> --save` afterwards to install a package and 
save it as a dependency in the package.json file. 


Press ^C at any time to quit. 

name: (tmp) bootstrap-one-page-marketing-design 

version: (1.0.0) 

description: Simple One Page Marketing Website Design powered by Bootstrap 4 

entry point: (index.js) Gulpfile.js 

test command: gulp test 

git repository: https://github.com/bassjobsen/bootstrap-one-page-marketing-design/ 
keywords: bootstrap, panini, sass, gulp 

author: Bass Jobsen 

license: (ISC) MIT 
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该 命令 会 创建 新 的 package.json 文件 ， 其 中 包含 了 与 项 目 有 关 的 各 种 元 数据 ， 以 及 项 目的 依 
赖 。 之 后 安装 的 各 种 Gulp 插件 都 会 成 为 该 项 目的 (开发 ) 依赖 。 


在 项 目 中 安装 Gulp， 并 通过 运行 以 下 命令 ,将 其 保存 为 开发 性 依赖 ( devDependencies ): 


npm install --save-dev gulp 














--save-dev 标记 会 将 Gulp 作为 aevbependency 保存 到 package.json 文件 中 。 


2.3.1 创建 包含 任务 信息 的 Gulpfile.js 
在 项 目 目录 中 创建 名 为 Gulpfilejjs 的 新 文件 ， 并 在 其 中 编写 以 下 JavaScript 代码 : 


var gulp = require('gulp'); 











gulp.task('default', function() ( 
// 默认 任务 代码 

}); 

之 后 我 们 会 在 此 文件 中 添加 Gulp 任务 。 可 以 运行 以 下 命令 进行 测试 : 

gulp 


该 默认 任务 会 运行 ， 且 不 做 任何 操作 。 
至 此 ， 除 了 Bootstrap ， 我 们 也 可 以 安装 需要 的 Gulp 插件 ， 来 搭建 构建 流程 。 








2.3.2 ”清理 任务 


每 次 运行 构建 流程 时 ， 清 理 任务 都 需要 移 除 临时 文件 夹 _site 及 其 所 有 内 容 : 
// 擦 除 打包 目标 文件 夹 


gulp.task('clean', function() { 
rimraf(' site'); 


3); 
我 们 需要 用 以 下 方式 安装 rimraf: 


npm install rimraf --save-dev 








2.4 配置 开发 环境 和 生产 环境 


二 良 置疑 ,我们 需要 在 项 目 开 发 过 程 中 使 用 构建 流程 。 但 在 开发 过 后 , 却 有 必要 运行 不 同 的 
任务 ， 使 代码 适 配 生 产 环 境 。 在 开发 阶段 ， 为 了 方便 调试 ， 我 们 需要 在 CSS 代码 中 包含 CSS 
sourcemap; 而 在 生产 环境 中 ， 则 需要 移 除 CSS sourcemap ， 以 压缩 CSS 代码 。 


gulp-environment 插件 可 以 方便 地 创建 开发 环境 、 生 产 环境 等 不 同 的 配置 ， 从 而 在 不 同 的 环 
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境 下 运行 相应 的 任务 。 可 以 运行 以 下 命令 来 安装 该 插件 : 
npm install --save-dev gulp-environments 
然后 在 Gulpfile.js 文件 中 添加 该 插件 ， 写 法 如 下 : 
var environments = require('gulp-environments'); 
可 以 用 该 插件 来 设置 不 同 的 环境 


var development = environments.development; 
var production - environments.production; 


之 后 ， 就 可 以 通过 --env 命令 行 标记 来 设置 运行 环境 : 


gulp build --env development 


在 代码 中 ， 可 以 根据 不 同 的 环境 来 设置 变量 


var source = production() ? "source.min.js" : "source.js"; 


或 者 仅 在 一 种 环境 下 运行 子 任务 : 


.pipe (development (sourcemaps.init())) 























可 以 访问 https://github.com/gunpowderlabs/gulp-environments ， 查 看 gulp-environ- 
ment 插件 的 完整 文档 和 示例 。 


2.5 用 Bower 安装 Bootstrap 








Bower 是 客户 端 编程 领域 的 包 管 理 系 统 。 可 以 用 Bower 来 安装 Bootstrap 源 代码 ， 用 更 轻松 
的 方式 实现 版 本 更 新 。 可 以 运行 以 下 命令 ， 初 始 化 Bower: 


bower init 
如 下 图 所 示 ， 回 答 该 命令 执行 过 程 中 所 提出 的 问题 


$ bower init 
name 
description 
main file 
what types of modules does this package expose? 
keywords 
authors 


license 

homepage 

set currently installed components as dependencies? 

add commonly ignored files to ignore list? 

would you like to mark this package as private which prevents it from being ac 
cidentally published to the registry? 





执行 以 上 步 又 后 ， 会 生成 一 个 bower.json 文件 。 然 后 运行 以 下 命令 : 
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bower install bootstrap#4 --save-dev 


该 命令 会 将 Bootstrap F 2X bower components 文件 夹 中 。 值 得 注意 的 是 , 由 于 Bootstrap W 
赖 jQuery 和 Tether， 因 此 在 上 述 过 程 中 ， 这 两 个 类 库 也 会 被 安装 。 





--save-dev 标记 会 将 Bootstrap 作为 Gevbependency 保存 到 bower.json 文件 中 。 


2.6 创建 本 地 Sass 文件 结构 


在 开始 将 Bootstrap 的 Sass 代码 编译 成 CSS 代码 前 ， 我 们 需要 在 本 地 创建 一 些 Sass 或 SCSS 
文件 。 首 先 , 在 项 目 目录 中 创建 一 个 新 的 名 为 scss 的 子 目录 。 在 该 目录 中 , 创建 项 目 主 文 件 app. 


SCSSo 


然后 , 在 该 scss 目录 中 创建 名 为 includes 的 子 目 录 。 从 bower_components 目录 下 的 Bootstrap 
源 代码 中 复制 bootstrap.scss 和 _variables.scss 这 两 个 文件 ， 将 其 粘贴 到 新 的 scss/includes 目录 中 : 
cp bower components/bootstrap/scss/bootstrap.scss 


Scss/includes/ bootstrap.scss 
cp bower components/bootstrap/scss/ variables.scss scss/includes/ 


值得 注意 的 是 ，bootstrap.scss 文件 被 重 命名 为 bootstrap.scss。 新 的 文件 以 下 划 线 开头 ， 并 成 
为 最 终 打包 文件 中 的 一 部 分 。 


用 以 下 方式 ， 将 之 前 步骤 中 复制 的 文件 导入 到 app.scss 文件 里 : 

@import "includes/variables"; 

QGimport "includes/bootstrap"; 

然后 打开 sess/includes/ bootstrap.sess 文件 ， 修 改 其 中 导入 Bootstrap 局 部 文件 的 代码 ， 使 
bower components 目录 中 的 源 代码 得 以 加 载 。 在 之 后 配置 Sas 编译 需 时 ， 我 们 会 将 
bower components 目录 配置 到 编译 器 的 包含 路 径 中 。_bootstrap.scss 文件 中 @import 语句 的 写法 
如 下 : 

// 核心 变量 与 混入 

Qimport "bootstrap/scss/variables"; 

Qimport "bootstrap/scss/mixins"; 


// 重 置 与 依赖 


Qimport "bootstrap/scss/normalize"; 

























































































至 此 ，Bootstrap 所 有 的 SCSS 代码 就 被 导入 到 项 目 中 了 。 当 需要 为 生产 环境 调整 代码 时 ， 可 
以 将 项 目 中 用 不 到 的 局 部 文件 注释 掉 。 

不 必修 改 scss/includes/_variables.scss 文件 ， 但 可 以 考虑 移 除 其 中 所 有 的 !aefault 声明 。 这 
是 因为 真正 的 默认 值 都 定义 在 original variables.scss 文件 中 并 已 被 导入 。 
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请 注意 ，scss/includes/_variables.scss 文件 中 不 必 包 含 所 有 的 Bootstrap 变量 。 但 包含 所 有 的 
Bootstrap 变量 会 让 修改 定制 工作 变 得 更 加 轻松 , 并 能 在 升级 Bootstrap 时 确保 自己 的 默认 值 不 变 。 


2.6.1 将 Bootstrap 的 Sass 代码 编译 成 CSS 代码 


接 下 来 该 把 Sass 代码 编译 成 CSS 代码 了 。Bootstrap 中 的 Sass 代码 是 用 新 的 SCSS 语法 所 编 
写 的 。 本 章 不 会 详细 介绍 Sass。 你 可 以 阅读 第 3 章 ， 学 习 有 关 Sass 的 知识 。 


在 Gulp 中 ,可 以 使 用 两 个 插件 将 Sass 代码 编译 成 CSS。 第 一 个 插件 叫 作 gulp-ruby-sass， 正 
如 插件 名 称 所 显示 的 ， 它 使 用 Ruby Sass 将 Sass 编译 为 CSS。 第 二 个 插件 叫 作 gulp-sass， 它 使 用 
node-sass, 通 过 libSass 编 译 Sass 代 码 , 本 书 将 使 用 第 二 个 插件 gulp-sass。 请 注意 ,libSass 与 Compass 
不 兼容 。 

可 以 通过 运行 以 下 命令 ， 在 项 目 中 安装 gulp-sass: 

npm install gulp-sass --save-dev 


安装 好 插件 后 ， 即 可 在 Gulpfile.js 中 添加 编译 任务 : 

















































































































var sass = require('gulp-sass'); 
var bowerpath = process.env.BOWER PATH || 'bower. components/'; 
var sassOptions = { 


errLogToConsole: true, 

outputStyle: 'expanded', 

includePaths: bowerpath 
E 


gulp.task('compile-sass', function () ( 
return gulp.src('./scss/app.scss') 
.pipe(sass(sassOptions).on('error', sass.logError)) 
.pipe(gulp.dest('./ site/css/')); 
)); 





请 注意 , 在 这 个 例子 中 , 我 们 将 includePatns 选项 值 设置 为 bowerpath 变量 ， 同时 使 用 
development () 函数 在 开发 环境 中 编写 CSS sourcemap。 TE F— BP, 我 们 将 介绍 更 多 有 关 CSS 
sourcemap 的 内 容 。 

















2.60(2 ”使 用 CSS 调试 sourcemap 


Sass 编译 器 会 将 多 个 不 同 的 Sass 文件 合并 成 单个 CSS 文件 。 在 多 数 情况 下 ， 这 一 CSS 文件 
会 被 压缩 。 因 此 如 果 用 浏览 器 中 的 开发 者 工具 查看 HTML 源 文件 ， 则 调试 器 中 的 样式 是 无 法 与 
原始 的 Sass 代码 相对 应 的 。 为 了 解决 这 一 问题 ， 可 以 使 用 CSS sourcemap ， 在 压缩 /合并 的 CSS 
文件 与 构建 前 的 Sass 代码 之 间 进 行 映射 。 


CSS sourcemap 的 设计 初衷 是 在 压缩 后 的 JavaScript 文件 与 其 源 文件 之 间 进 行 映射 。 从 版 本 3 
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开始 sourcemap 协议 也 支持 CSS。 使 用 Sass 编译 器 (或 者 如 本 例 所 展示 的 ， 使 用 更 好 的 
gulp-sourcemap 插件 )， 可 以 生成 CSS sourcemap ， 并 在 CSS 文件 中 添加 对 sourcemap 的 引用 ， 写 
法 如 下 : 


/*# sourceMappingURL=app.css.map */ 


在 以 下 浏览 器 开发 工具 的 截图 中 可 以 看 到 ， 样 式 规则 会 被 对 应 到 声明 它 的 Sass 源 文件 。 








Styles Computed EventListeners DOM Breakpoints Properties 


:hov 49 .cls t, 
element.style ( 和 


.features [class^-"col-"] { features.scss:1 
text-align: center; 

} 

@media (min-width: 768px) 

.col-md-4 { grid-framework.scss:28 





width: 33.33333*; 
) 
(media (min-width: 768px) 
)|-md-1, col 2 1 





nd-2, id-3, .col-md-4 ( md-5 grid-framework.scss:24 
jl-m l-md-7, l-md md-9 md-10, 1 1-11, .co 12 
1 
float: left; 
} 
1-xs-3, 
col-xs-8 














要 使 用 CSS sourcemap ， 首 先 需 安装 gulp-sourcemaps 插件 : 


npm install gulp-sourcemaps --save-dev 


然后 ， 就 可 以 将 sourcemap 添加 到 compile-sass 任务 中 : 


gulp.task('compile-sass', function () ( 
return gulp.src('./scss/app.scss') 
.pipe(development(sourcemaps.init())) 
.pipe(sass(sassOptions).on('error', sass.logError)) 
.pipe(development (sourcemaps.write())) 
.pipe(gulp.dest('./ site/css/')); 
)); 


请 注意 ， 由 于 使 用 了 development () 判断 和 gulp-environment 插件 ，CSS sourcemap 只 会 在 
开发 环境 下 生成 。 


如 之 后 所 描述 的 ，gulp-sourcemaps 插件 还 支持 gulp-postcss 和 gulp-cssnano 插件 。 这 些 插件 
应 该 在 compile-sass 任务 中 的 sourcemaps. init () 语 句 之 后 ， sourcemaps .write() 语 句 之 前 
执行 。 











2.6.3 ”运行 postCSS 前 级 自动 添加 插件 
从 版 本 3.2 FH, Bootstrap 使 用 前 缀 自动 添加 插件 , 在 打包 的 Css 代码 中 自动 添加 浏览 器 引 
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擎 前 级 。 运 行 postCSS 前 级 自动 添加 插件 非常 简单 ， 且 可 以 用 Gulp 实现 自动 化 。 
在 Gulp 中 ， 可 以 使 用 gulp-postcss 插件 来 运行 别 的 插件 ， 处 理 编译 后 的 CSS 代码 。 


可 以 运行 gulp-postcss 插件 ， 在 Bootstrap 中 使 用 postcss 前 级 自动 添加 工具 。 该 工具 会 使 用 
Can I Use 数据 库 中 的 数据 ， 在 生成 的 Css 代码 中 自动 添加 所 需 的 浏览 器 引擎 前 级 。 


除 此 之 外 ,Bootstrap 还 使 用 了 mq4-hover-shim 这 一 模拟 工具 ( shim ), 用 于 模拟 媒体 查询 Level 
4 标准 中 的 hover 媒体 特性 。 



































有 关 该 shim 工具 的 更 多 信息 ， 可 以 访问 https:/www.npmjs.com/package/mq4-hover-shim。 


执行 以 下 操作 ， 安 装 、 配 置 autoprefixer 和 mq4-hover-shim。 首 先 ， 执 行 以 下 命令 : 


npm install gulp-postcss autoprefixer mg4-hover-shim --save-dev 


然后 在 Gulpfile.js 中 定义 一 个 变量 ， 用 于 表示 将 在 gulp-postcss 插件 中 执行 的 一 系列 任务 : 


var processors = [ 
mq4HoverShim.postprocessorFor(( hoverSelectorPrefix: '.bs-true-hover ' Jj), 
autoprefixer(( 
browsers: [ 
EA 
// Bootstrap 官方 所 支持 的 浏览 器 : 
// http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/ 
#supported-browsers 
// 
'Chrome »- 35', 
'Firefox »- 38', 
'Edge »- 12', 
'Explorer »- 9', 
'iOS »- 8', 
'Safari >= 8', 
'Android 2.3', 
'Android >= 4', 
'Opera »- 12' 
] 
1; 


可 以 看 到 ，autoprefixer 接受 一 个 散 列 类 型 的 参数 ,其 中 设 定 了 需要 支持 什么 浏览 器 。 可 以 从 
Bootstrap 源 代码 的 bower components/bootstrap/Grunt.js 文件 中 复制 这 一 散 列 值 。 


然后 , 就 可 以 将 postcss 插件 添加 到 sass 编译 任务 中 , 写法 如 下 。 值得 注意 的 是 , gulp-postess 
插件 可 以 配合 gulp-sourcemaps 插件 一 起 使 用 : 


gulp.task('compile-sass', function () ( 
return gulp.src('./scss/app.scss') 
.pipe(development (sourcemaps.init())) 
.pipe(sass(sassOptions).on('error', sass.logError)) 
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.pipe(postcss(processors)) 
.pipe (development (sourcemaps.write())) 
.pipe(gulp.dest('./ site/css/')); 

)); 


2.6. 处 理 CSS 代码 以 适 配 生产 环境 


将 项 目 部 署 到 生产 环境 时 ,我们 不 再 需要 使 用 CSS sourcemap。compile-sass 这 一 任务 会 借助 Ex] 
gulp-environment 插件 ， 用 development () 函数 确保 CSS sourcemap 仅 在 开发 环境 中 生成 。 


编译 出 来 的 CSS 代码 越 小 ， 它 在 浏览 器 中 的 加 载 速度 就 越 快 。 因 此 ， 压 缩编 译 后 的 CSS 代 
码 , 会 让 加 载 速度 变 得 更 快 。CSSnano 可 以 对 CSS 代码 集中 优化 , 确保 处 理 后 的 结果 在 生产 环境 
下 尽 可 能 小 。 


同样 ， 也 存在 CSSnano 所 对 应 的 Gulp 插件 ， 可 以 运行 以 下 命令 进行 安装 : 


npm install gulp-cssnano --save-dev 


插件 安装 完成 后 ， 就 可 以 将 它 加 到 compile-sass 任务 中 : 


var cssnano = require('gulp-cssnano'); 
gulp.task('compile-sass', function () ( 
return gulp.src('./scss/app.scss') 
.pipe(development (sourcemaps.init())) 
.pipe(sass(sassOptions).on('error', sass.logError)) 
.pipe(postcss(processors)) 
.pipe(production(cssnano())) 
( 
( 
































.pipe(development (sourcemaps.write())) 
.pipe(gulp.dest('./ site/css/')); 
)); 


上 述 代 码 清楚 地 表明 ，cssnano 仅 在 生产 环境 下 运行 。 除 了 这 种 写法 ,也 可 以 将 cssnano 作为 
gulp-postcss 插件 的 一 个 处 理 器 来 运行 。 


造成 CSS 性 能 问题 的 一 个 最 常见 的 原因 是 CSS 代码 宛 余 。 因 此 ， 可 以 将 scss/includes/ 
_bootstrap.scss 文件 中 没有 用 到 的 CSS 组 件 等 代码 注释 掉 ， 进 一 步 缩减 编译 后 CSS 的 大 小 。 














2.6.5 对 SCSS 代码 进行 静态 检查 


当 使 用 Sass 扩展 和 修改 Bootstrap 的 CSS 源 代 码 时 ， 保 持 代 码 整 洁 、 易 读 是 非常 重要 的 。 借 
助 SCSS-lint 工具 , 可 以 写 出 整洁 而 又 可 复 用 的 SCSS 代码 。 同 样 , 也 存在 SCSS-lint 所 对 应 的 Gulp 
插件 ， 可 以 运行 以 下 命令 进行 安装 : 


npm install gulp-scss-lint --save-dev 























请 注意 ， 使 用 gulp-scss-lint 插件 前 ， 需 要 安装 Ruby 和 SCSS-lint。 


接 下 来 ， 可 以 在 Gulpfile.js 文件 中 添加 scss-lint 任务 : 
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gulp.task('scss-lint', function() ( 
return gulp.src('scss/**/*.scss') 
.pipe(scsslint()); 


条 学 


Bootstrap 中 自 带 了 SCSS-lint 工具 的 配置 文件 。 可 以 从 Bootstrap 源 代 码 中 复制 此 配置 文件 至 
本 地 scss 目录 ， 在 项 目 中 复 用 : 


cp bower components/bootstrap/scss/.scss-lint.yml scss/ 


然后 修改 scss-lint 任务 ， 使 用 该 配置 文件 : 


gulp.task('scss-lint', function() ( 
return gulp.src('scss/**/*.scss') 
.pipe(scsslint(('config': 'scss/.scss-lint.yml'))); 








)); 


当 对 包括 _variable.scss fll. bootstrap.scss 在 内 的 sess 目录 中 的 Sass 文件 进行 静态 检查 时 ， 检 
查 结果 中 会 出 现 警 告 ， 而 这 是 由 _bootstrap.scss 文件 中 的 注释 所 引起 的 。 


可 以 修改 .scss-lint,yml 文 件 中 注释 相关 的 设置 ,对 除 bootstrap.scss 以 外 的 文件 进行 注释 检查 : 


Comment : 
enabled: true 
exclude: [' bootstrap.scss'] 


另外 ， 本 书 的 示例 代码 还 修改 了 以 下 配置 ; 


ColorKeyword: 
enabled: false 


对 于 CSS 中 的 颜色 ， 一般 认为 应 当 使 用 色 值 ， 而 不 是 具体 的 颜色 名 称 。 比 如 ， 应 当 使 用 
#ffa500 而 不 是 orange。 出 于 易 读 性 考虑 ， 本 书 示例 代码 会 偏好 使 用 颜色 名 称 。 


可 以 阅读 第 3 章 ， 了 解 其 他 配置 项 信息 。 


可 以 将 scss-lint 任务 添加 到 默认 任务 中 ， 也 可 以 在 需要 时 手动 运行 。 当 将 scss-lint 添加 到 默 
认 任 务 中 时 ， 不 妨 将 其 与 gulp-cached 插件 配合 使 用 ， 仅 对 修改 的 文件 进行 静态 检查 : 


var scsslint = require('gulp-scss-lint'); 
var cache - require('gulp-cached'); 
gulp.task('scss-lint', function() ( 
return gulp.src('/scss/**/*.scss') 
.pipe(cache('scsslint')) 
.pipe(scsslint()); 


)); 


当 通 过 watch 任务 对 文件 进行 静态 检查 时 ， 也 应 当 采 用 相同 的 写法 ， 使 用 gulp-cached 插件 ， 
本 章 稍 后 将 对 此 做 进一步 的 介绍 。 
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2.7 准备 JavaScript 插件 


除了 CSS， 有 些 Bootstrap 组 件 也 会 使 用 JavaScript。Bootstrap 会 自 带 一 些 jQuery 插件 ,用 于 
实现 一 些 常 用 的 组 件 功能 。 比 如 ,与 导航 条 组 件 依 赖 折 炙 插件 的 情况 相 类 似 ， 传送带 ( carousel ) 
组 件 也 存在 相应 的 插件 依赖 


这 些 插件 依赖 jQuery， 而 提示 框 和 弹 框 组 件 则 依赖 Tether。 


























在 构建 流程 中 ， 可 以 用 gulp-concat 搬 件 将 jQuery, Tether 和 别 的 插件 打包 成 一 个 文件 。 


可 以 运行 以 下 命令 ， 安 装 gulp-concat 插件 : 





npm install gulp-concat --save-dev 





安装 完成 后 ， 打 包 JavaScript 文件 的 写法 如 下 : 


gulp.task('compile-js', function() { 
return gulp.src([bowerpath+ 'jquery/dist/jquery.min.js', bowerpath+ 
'tether/dist/js/tether.min.js', bowerpath+ 
'bootstrap/dist/js/bootstrap.min.js','js/main.js']) 
.pipe(concat('app.js')) 
.pipe(gulp.dest('./ site/js/')); 
)); 


在 该 compile-js 任务 中 , 本 地 的 js/main.js 也 会 被 打包 到 最 后 的 文件 中 ,也 就 是 说 , 除了 插件 
设置 ， 开 发 者 自己 写 的 JavaScript 代码 也 可 以 被 打包 在 内 。 
处 理 JavaScript 代码 以 适 配 生产 环境 


上 面 的 compile-js 任务 只 是 拼接 了 bower components 目录 中 已 经 编译 并 压缩 好 的 JavaScript 
文件 。 这 些 文件 从 bower compoents 目录 加 载 。 























bootstrap.min.js 包含 了 所 有 的 Bootstrap 插件 ， 而 开发 者 很 可 能 只 需要 其 中 一 部 分 。 


可 以 在 构建 流程 中 仅 打包 那些 使 用 到 的 插件 ， 并 自行 将 其 压缩 ， 从 而 生成 更 小 的 JavaScript 
文件 。 


可 以 运行 以 下 命令 安装 gulp-uglify 插件 ， 压 缩 代码 : 


npm install --save-dev gulp-uglify 























使 用 gulp-uglify 插件 后 ，compile-js 任务 的 写法 如 下 : 


gulp.task('compile-js', ['compress']); 


配置 完成 后 ， 打 包 JavaScript 文件 的 写法 如 下 : 
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Var uglify = 


bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 
bowerpat 








require('gulp-uglify'); 
gulp.task('compress', function() ( 
return gulp.src([ 


N+ 





'jqu 
'tet 





' boo 


'js/main.js' // 


1) 


-pipe (uglify ()) 
.pipe(gulp.dest('dist/js/app.js')); 


)); 


ery/dist/jquery.js', 
her/dist/js/tether.js', 
tstrap/js/src/alert.js', 
tstrap/js/src/button.js', 
tstrap/js/src/carousel.js', 
tstrap/js/src/collapse.js', 
tstrap/js/src/dropdown.js', 
tstrap/js/src/modal.js', 
tstrap/js/src/popover.js', 
tstrap/js/src/scrollspy.js', 
tstrap/js/src/tab.js', 
tstrap/js/src/tooltip.js', 
tstrap/j]s/src/util.18&', 

自 定义 的 JavaScript 代码 














当 在 项 目 中 参考 以 上 代码 时 ， 请 移 除 项 目 中 不 需要 的 JavaScript 文件 。 


在 该 代码 中 ，jQuery 和 Tether 这 








而 个 类 库 也 会 被 打包 在 一 起 ， 你 也 可 以 通过 CON 来 加 载 它 


们 。 对 于 本 项 目 而 言 ， 可 以 使 用 html/includes/footerjavascripts.html 模板 中 的 HTML 代码 : 


«1-- 首先 加 载 jQuery， 然 后 加 载 Bootstrap 的 JS --> 


«gcript 


src-"https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"»«/script» 


<script 


Src-"https://cdn.rawgit.com/HubSpot/tether/v1.2.0/dist/js/tether.min.js"»«/script» 


«script src-"(( root J)js/app.js"»«/script» 


下 一 节 将 对 HTML 模板 做 详细 介绍 。 


2.8 模块 化 HTML 


在 本 章 中 ， 我 们 创建 的 只 是 一 个 单 页 面 网 站 ， 但 在 此 过 程 中 使 用 模板 引擎 也 是 不 无 神 益 的 。 




















只 要 是 扩展 项 目 ， 编 写 更 多 的 HTML 网 页 ， 那么 遵循 DRY 原则 就 可 以 让 工作 变 得 更 加 高 效 且 可 


复 用 。HTML 模板 语言 和 引擎 有 很 多 。Bootstrap 使 用 的 是 Jekyll, €f 


门 可 以 借助 该 静态 网 站 生成 





器 在 本 地 运行 Bootstrap 的 文档 。Bootstrap CLI 中 的 很 多 模板 目前 使 用 的 是 Nunjucks。 而 在 本 章 
的 Gulp 构建 流程 中 ， 我 们 将 使 用 Panini， 它 是 一 个 基于 Handlebars 模板 语言 ， 实 现 了 模板 、 页 





AM 





面 、 局 部 文件 等 概 


的 平面 文件 编译 絮 。 


PAS 












































对 于 营销 示例 项 目 而 言 ， 首 先 需要 搭建 如 下 包含 HTML 模板 的 文件 和 目录 结构 。 
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html 

data 

helpers 

includes 
features .html 
footer.html 
footerjavascripts.html 
header.html 
jumbotron.html 
navbar.html 
navigationheader.html 

layouts 

[一 default.html 

pages 

L— index.html 











在 该 文件 和 目录 结构 中 ，pages 目录 存放 的 是 网 页 文件 。 而 每 个 网 页 文件 都 会 有 其 对 应 的 存 
放 在 layouts 目录 中 的 布局 文件 。 网 页 文件 和 布局 文件 都 可 能 用 到 includes 目录 中 的 HTML 局 部 
文件 。 


可 以 访问 http://foundation.zurb.com/sitesdocs/panini.html 和 https://github.com/zurb/panini/ 获 取 
更 多 有 关 Panini 的 信息 o 
2.8.4 新 建 Gulp 任务 ， 编 译 Panini 模板 


运行 以 下 命令 ， 在 项 目 中 安装 Panini 编译 带 : 


npm install panini --save-dev 
安装 完成 后 ， 将 HTML 编译 任务 添加 到 Gulpfilejs 文件 中 ， 写 法 如 下 : 
var panini = require('panini'); 


gulp.task('compile-html', function(cb) ( 
gulp.src('html/pages/**/*.html') 

.pipe (panini ({ 
root: 'html/pages/', 
layouts: 'html/layouts/', 
partials: 'html/includes/', 
helpers: 'html/helpers/', 
data: 'html/data/' 

})) 

.pipe(gulp.dest(' site')); 

cb; 

s 








接 下 来 ， 就 可 以 运行 Gulp compile-html 命令 了 。 


与 CSS 和 JavaScript 任务 相同 compile-html 任务 会 将 编译 后 的 文件 保存 到 _site 文件 夹 中 。 
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2.8.2 ” 校 验 编译 后 的 HTML 代码 


Bootlint 是 Bootstrap 官方 提供 的 用 于 检查 网 页 中 常见 HTML 错误 的 工具 。 对 于 Bootstrap 中 
的 组 件 和 和 窗口 部 件 来 说 , 其 DOM 部 分 的 代码 需要 符合 特定 的 结构 。 Bootlint 会 检查 页 面 的 HTML 
结构 ， 并 确保 其 正确 性 。 同 时 ， 它 也 会 检查 HTML 文档 中 是 否 包含 了 必需 的 meta 标签 。 


























请 注意 ，Bootlint 检查 的 对 象 必须 是 合法 的 HTML5 页 面 。 因 此 在 运行 Bootlint 前 , 我们 需要 
运行 男 一 个 静态 检查 工具 ， 确 保 检查 对 象 是 合法 的 HTML 代码 。 运 行 以 下 命令 ， 安 装 gulp-html 
插件 : 


npm install gulp-html --save-dev 














gulp-html 是 Gulp 中 用 于 校 验 HTML 的 插件 ， 其 内 部 使 用 了 vnu. jar。 








然后 安装 gulp-bootlint 插件 : 


npm install gulp-bootlint --save-dev 


至 此 ， 可 以 轻松 地 编写 html-validate 任务 ， 写 法 如 下 : 


var validator = require('gulp-html'); 
var bootlint = require('gulp-bootlint'); 
gulp.task('validate-html', [compile-html1], function() ( 
gulp.src(' site/**/*.html') 
.pipe(validator()) 
.pipe(bootlint()); 
)); 


按照 这 一 写法 ，validate-html 任务 的 第 二 个 参数 为 [ [compile-html] ， 因 此 该 任务 会 在 
compile-html 任务 完成 后 执行 。 








至 于 是 否 应 当 在 构建 流程 中 包括 HTML 校 验 这 一 环节 ， 你 可 以 自行 决定 。 如 果 不 需 要 这 一 
环节 ， 可 以 轻松 地 从 以 下 代码 中 移 除 validate-html 任务 : 


gulp.task('html', ['compile-html','validate-html']); 


2.9 创建 静态 Web 服务 器 


完成 编译 HTML, CSS 和 JavaScript 代码 的 所 有 任务 后 ， 就 可 以 在 浏览 器 中 显示 和 查看 结果 
了 。 可 以 使 用 Browsersync 这 一 模块 ， 在 开发 代码 时 保持 浏览 器 同步 。 该 模块 的 工作 原理 为 : 
当 浏 览 器 首次 发 送 页 面 请 求 时 ， 模 块 会 在 <body> 标 签 后 注入 一 个 异步 脚本 标签 




















在 Gulp 中 使 用 Browsersync 时 无 须 安装 任何 特殊 插件 ， 只 要 简单 地 用 require() 将 该 模块 
引入 就 好 。 
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首先 ， 运行 以 下 命令 安装 Browsersync: 


npm install browser-sync gulp --save-dev 


然后 在 Gulpfile.js 文件 中 创建 如 下 任务 : 


var browser = require('browser-sync'); 


var port - process.env.SERVER PORT || 8080; 

// 启动 Browsersync 实例 

gulp.task('server', ['build'], function()( 
browser.init((server: './ site', port: port)); 


)); 


server 任务 依赖 build 任务 ( 上述 代 码 中 的 第 二 个 参数 ['builq'] ), 因 此 server TE4$ 2: ^ build 
任务 运行 完成 后 再 执行 。 








该 任务 会 运行 监听 8080 端口 的 静态 Web 服务 器 ， 向 浏览 器 提供 临时 目录 site 中 的 内 容 , 其 
中 包含 了 别 的 任务 中 所 编译 生成 的 文件 。 

















2.9.1 监听 文件 的 修改 


静态 Web 服务 顺 成 功 运行 后 ， 即 可 向 构建 流程 中 添加 watch ( 监听 ) 任务 。 该 任务 会 在 文件 
发 生 修 改 时 触发 浏览 器 刷新 。 
其 具体 写法 如 下 : 


// 监听 文件 修改 
gulp.task('watch', function() { 


gulp.watch('scss/**/*', ['compile-sass', browser.reload]); 
gulp.watch('html/pages/**/*', ['compile-html']); 
gulp.watch(['html/í(layouts,includes,helpers,data)/**/*'], ['compile-html:reset', 


'compile-html']); 
)); 


上 述 操作 会 监听 sess 文件 夹 中 的 Sass 文件 和 html 文件 夹 中 的 HTML 模板 。 而 compile-html 
任务 则 会 在 结束 后 触发 browser.reload 语句 ; 


.on ('finish', browser.reload); 


请 注意 ， 对 于 pages 目录 以 外 的 Panini 文件 修改 而 言 ， 在 对 它们 执行 compile-html 任务 前 需 
先 执行 compile-html:reset 任务 ， 调 用 panini .refresn() 语 句 。 因 为 Panini 仅 在 首次 运行 时 加 
载 相关 的 布局 、 局 部 文件 、 帮 助 文档 和 数据 等 文件 ， 所 以 需要 刷新 操作 来 实现 重新 编译 。 


2.9.2 复制 并 压缩 图 片 


每 次 运行 构建 流程 时 ，clean ( 清理 ) 任务 都 会 清空 site 临时 目录 ， 因 此 车 项 目 中 使 用 了 图 
片 ， 则 每 次 运行 构建 流程 时 都 必须 手动 将 这 些 图 片 复制 到 _site 目录 中 。 
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可 以 将 这 些 图 片 和 其 他 资源 保存 到 asset 目录 中 ， 并 运行 以 下 任务 将 其 复制 到 _site 目录 内 : 
// 复制 资源 文件 
gulp.task('copy', function() ( 


gulp.src(['assets/**/*']).pipe(gulp.dest(' site')); 
Js; 


如 果 是 图 片 的 话 ， 除 了 复制 ， 还 可 以 用 gulp-imagemin 插件 将 其 压缩 。 


可 以 访问 https:/github.com/sindresorhus/gulp-imagemin， 了 解 更 多 有 关 该 插件 的 信息 。 











var gulp = require('gulp'); 
var imagemin - require('gulp-imagemin'); 
var pngquant - require('imagemin-pngquant'); 
gulp.task('default', () => ( 
return gulp.src('assets/images/*') 
.pipe(imagemin((í 
progressive: true, 
svgoPlugins: [ 
(removeViewBox: false), 
(cleanupIDs: falsej 


use: [pngquant ()] 
32) 
.pipe(gulp.dest(' site/images')); 
py 


2.10 ”归纳 汇总 ， 创 建 default 任务 


在 Gulpfile.js 文件 的 末尾 ， 我 们 将 编写 一 系列 任务 ， 其 中 default (默认 ) 任务 会 以 一 定 顺序 
运行 构建 流程 中 的 具体 任务 环节 。 这 些 任务 的 具体 写法 如 下 : 








gulp.task('set-development', development.task); 

gulp.task('set-production', production.task); 
gulp.task('test',['scss-lint','validate-html']); 

gulp.task('build', ['clean','copy','compile-js','compile-sass','compile-html']); 
gulp.task('default', ['set-development','server', 'watch']); 

gulp.task('deploy', ['set-production','server', 'watch']); 


default 任务 首先 调用 set-development， 将 运行 环境 设置 为 开发 环境 。 然 后 运行 server 任务 ， 
接着 启动 watch 任务 。 由 于 server 任务 依赖 build 任务 ， 所 以 每 次 server 任务 ( Browsersync ) 运 
行 前 都 会 先 运 行 build 任务 。 除 了 一 开始 将 环境 设置 为 生产 环境 外 ,deploys 任务 做 的 事情 和 default 
任务 做 的 基本 一 致 。 


test 任务 则 对 SCSS 代码 以 及 编译 后 的 HTML 代码 进行 静态 检查 。 可 以 运行 gulp test fm 
S, WZT test 任务。test 任务 的 执行 结果 如 下 : 


[00:15:02] Starting 'scss-lint'... 
[00:15:02] Starting 'compile-html'... 
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[00:15:12] Finished 'compile-html' after 9.25 s 

[00:15:12] Starting 'validate-html'... 

[00:15:12] Finished 'validate-html' after 22 ms 

[00:15:45] 1 issues found in 
/home/bass/testdrive/bootstrapbook/chapter2/scss/includes/ bootstrap.scss 

[00:15:45] includes/ bootstrap.scss:1 [W] Comment: Use ^//^ comments everywhere 

[00:15:45] 2 issues found in 
/home/bass/testdrive/bootstrapbook/chapter2/scss/includes/ page-header.scss 

[00:15:45] includes/ page-header.scss:11 [W] PseudoElement: Begin pseudo classes 
with a single colon: ^:^ 

[00:15:45] includes/ page-header.scss:13 [W] TrailingWhitespace: Line contains 
trailing whitespace 

[00:15:45] Finished 'scss-lint' after 43 s 

[00:15:45] Starting 'test'... 

[00:15:45] Finished 'test' after 27 hs 

[Wed Apr 27 2016 00:15:59 GMT«0200 (CEST)] ERROR 
/home/bass/testdrive/bootstrapbook/chapter2/ site/index.htm1:58:13 E041 '.carousel" 
must have exactly one '.carousel-inner'^ child. 


至 此 ， 构 建 流程 即 告 完成 ， 让 我 们 开始 使 用 吧 ! 可 以 运行 以 下 命令 ， 启动 构建 流程 : 
gulp 


gulp 命令 会 运行 default 任务 。 它 会 启动 静态 Web 服务 器 并 自动 监听 文件 修改 。 


2.41 使 用 构建 流程 ， 完 成 项 目 

本 章 开 头 展示 了 一 张 单 页 面 营销 网 站 的 截图 ， 这 个 移动 优先 的 响应 式 网 站 是 用 Bootstrap 开 
发 的 。 在 本 章 剩余 的 内 容 中 ， 将 介绍 如 何 用 之 前 创建 的 Gulp 构建 流程 来 搭建 这 一 网 站 。 

你 需要 将 HTML 页 面 分 割 为 已 创建 的 HTML 模板 结构 所 对 应 的 不 同 部 分 。 


该 项 目 会 设置 一 个 页 面 断 点 : 768 像素 。 对 于 宽度 大 于 768 像素 的 视 口 而 言 ， 导 航 菜单 会 被 
水 平 放置 ， 别 的 UI 元 素 也 会 相应 调整 。 






































2.11.1 布局 模板 
之 前 提 到 过 ， 我 们 将 使 用 Panini 来 模块 化 HTML 代码 。 并 借 此 避免 HTML 代码 出 现 重复 。 


Panini 使 用 了 Handlebars 模板 语言 。 强 烈 建 议 你 访问 以 下 网 址 ， 阅 读 Panini 的 官方 文档 : 
http:/foundation.zurb.com/sites/docs/panini.html。 


主页 文件 index.html 中 仅 包 含 以 下 内 容 : 











layout: default 
title: Home 


{{> features)) 
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除了 {{> features})} 片 段 所 包含 的 includes/features.html 页 面 外 ， 其 他 所 有 的 HTML 代码 
都 是 index.html 文件 通过 layout/default.html 这 一 让 所 有 页 面 共享 布局 的 默认 模板 的 方式 来 加 载 的 。 


默认 模板 代码 的 写法 如 下 : 


<!DOCTYPE html» 
«html lang="en"> 
«head» 
«1-- 首先 包含 必需 的 meta 标签 --> 
«meta charset-"utf-8"» 
«meta name-"viewport" content-"width-device-width, initial-scale-1, 
shrink-to-fit-no"'» 











«meta http-equiv-"x-ua-compatible" content-"ie-edge"'» 
«title» Your Company :: ((title))«/title» 


«l--Bootstrap CSS ==> 
«link rel="stylesheet" href-"((root))css/app.css"'» 
</head> 
<body> 
{{> header}} 
{{> navigationheader}} 
{{> body}} 
{{> footer}} 
{{> footerjavascripts}} 
</body> 
</html> 


在 此 模板 中 ，{ {> body}} 片 段 将 包含 项 目 首页 index.html 文件 中 的 HTML 代码 。 而 该 首页 
文件 中 的 layout :default 声明 则 会 让 Panini 使 用 html/layouts/default.html 文件 中 的 默认 模板 。 











在 默认 模板 中 ，{ {> header}} 片 段 会 引入 html/includes/header.html 文件 中 所 包含 的 HTML 
页 眉 局 部 文件 。 





在 下 一 节 中 ， 你 将 开发 这 一 页 眉 。 开 始 之 前 ， 请 执行 gulp 命令 运行 默认 任务 ， 任 务 运行 后 
可 以 在 浏览 器 中 直接 看 到 本 节 的 成 果 。 











2.11.2 RE 











调整 浏览 器 大 小 ， 使 其 视 口 小 于 768 像素 。 此 时 页 眉 会 如 下 图 所 示 。 














开始 在 html/includes/header.html 文件 中 编写 页 由 所 属 的 HTML 代码 。 
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该 HTML 代码 的 第 一 个 版 本 的 写法 如 下 : 


<header class="page-header"> 
<div class="container"> 
<div class="row"> 
«div class="col-xs-12"><h1 
class="display-4">Your<span>Company</span></h1l></div> 
<div class="col-xs-12"> 
«form class="form-inline"> 
<input class="form-control" type="text" placeholder="Search"> 
<button class="btn btn-outline-success" 
type="submit">Search</button> 
</form> 
</div> 
</div> 
</div> 
</header> 


所 有 的 HTML 都 包含 在 一 个 具有 page-header 类 的 header 元 素 中 。 而 紧 跟着 <heagder> 
元 素 的 是 具有 container 类 的 <div> 元 素 。 其 中 container Æ Bootstrap 中 最 基本 的 布局 元 素 ， 
也 是 使 用 网 格 系统 时 不 可 或 缺 的 类 。Bootstrap 中 的 响应 式 网 格 系统 由 12 栏 、4 个 断 点 所 组 成 ， 
这 些 断 点 划分 出 5 种 网 格 : 极 小 网 格 、 小 网 格 、 中 等 网 格 、 大 网 格 和 极 大 网 格 。 在 container 中 ， 
我 们 通过 具有 row 类 的 <daiv> 元 素来 创建 一 个 行 区 域 。 行 区 域内 的 各 种 栏 元 素 则 以 co1-tarid)-* 
类 来 表示 。 可 以 阅读 第 1 章 ， 了 解 有 关 Bootstrap 网 格 和 响应 式 特性 的 更 多 信息 。 


上 述 例子 中 , 我 们 在 行 区 域内 创建 了 两 栏 。 第 1 栏 中 包含 了 公司 名 称 ， 而 第 2 栏 中 则 包含 了 
搜索 表单 。 在 小 型 浏览 器 视 口 中 ， 这 两 栏 应 当 各 自 撑 满 100% 的 视 口 宽度 ， 呈 现 出 堆 秋 的 效果 。 
而 在 上 述 例子 中 , 该 效果 是 通过 col-xs-12 这 个 类 来 实现 的 。col-xs-12 这 一 名 称 清楚 地 表明 
在 极 小 网 格 中 相关 元 素 将 占据 整个 12 栏 栏 宽 。 不 过 ， 尽 管 col-xs-12 会 将 width 设置 为 100% 
并 将 float 设置 为 ltftf， 其 效果 却 因 全 局 的 box-sizing: border-box 声明 而 与 默认 情形 并 无 二 
致 。 在 box-sizing 值 为 border-box 的 情况 下 ， 块 级 元 素 会 占据 其 父 元 素 (container ) 的 整个 空间 。 
因此 ，col-xs-12 类 的 存在 与 否 并 不 影响 最 终结 果 。 有 关 box-sizing 模型 的 详细 解释 ,可 以 阅读 
第 1 章 。 

在 之 前 的 例子 中 ， 公 司 名 会 包含 在 一 个 具有 display-4 类 的 <h1> 元 素 里 。 而 该 <h1> 还 会 
包含 <span> 元 素 ， 以 实现 用 两 种 色彩 显示 公司 名 称 。 


对 于 第 2 栏 中 的 搜索 表单 而 言 ,其 内 部 用 form-inline 类 及 铁 空 按钮 构建 了 默认 的 内 联 表单 。 
完成 HTML 代码 的 编写 后 ， 即 可 开始 定制 CSS. 
1. ES RAKI CSS 代码 


和 之 前 一 样 , 我 们 将 使 用 Sass 来 构建 定制 CSS 代码 。 对 于 页 眉 来 说 , 需要 创建 scss/includes/_ 
page-header.scss 这 一 新 的 Sass 局 部 文件 ， 并 在 scss/app.scss 文件 中 将 其 引入 。 
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Gimport "includes/page-header"; 





引入 上 述 局 部 文件 前 需 先 引入 Bootstrap ， 这 样 才能 复 用 Bootstrap 中 的 混入 并 在 需要 时 扩展 
Bootstrap 类 。scss/includes/_page-header.scss 文件 中 SCSS 代码 的 写法 如 下 : 


.page-header { 
background-color: $page-header-background; 


.display-3 ( 
color: $company-primary-color; 
span { 

color: $lightest-color; 

j 

j 

[class^sz"col-"]:last-child ( 
margin-top: $spacer-y * 2; 

j 

j 





除了 上 述 代 码 中 的 [class^="col-"] :last-chilq 选择 符 外 ， 还 可 以 使 用 像 .search- 
form-column 类 这 样 的 自 定 义 类 选择 符 ， 并 通过 修改 相关 的 HTML 代码 来 生效 。 









































上 述 SCSS 代码 中 的 颜色 变量 是 在 scss/includes/_variables.scss 文件 中 用 以 下 方式 声明 的 : 





$darkest-color: #000; // black; 
S$lighest-color: #fff; // white; 
$company-primary-color: #f80; //orange; 


// RB 
$page-header-background: $darkest-color; 


2. CSS 和 HTML 代码 优化 
对 于 以 上 示例 ， 当 浏览 器 窗口 大 小 调整 到 小 于 544 像素 时 ， 页 面 上 就 会 出 现 问题 。 











首先 , 由 于 Bootstrap 中 的 inline-form 类 仅 在 屏幕 宽度 大 于 544 像素 时 生效 , 因此 示例 中 
的 搜索 按钮 会 被 挤 到 下 一 行 中 。 可 以 用 以 下 SCSS 代码 重 写 Bootstrap 的 默认 行为 : 





.page-header { 

.form-inline .form-control ( 
display: inline-block; 
width: auto; 

j 

} 


除了 这 一 方法 外 ， 还 可 以 通过 添加 hidden-xs-down 类 在 最 小 型 的 屏幕 中 移 除 搜索 按钮 o 
hidden-xs-down 类 仅 在 极 小 型 网 格 中 隐藏 相关 元 素 。 

另外 ,在 最 小 型 的 屏幕 中 ， 公 司 名 称 可 能 会 显得 过 大 。 为 此 ， 可 以 使 用 第 1 章 所 提 到 的 
media-breakpoint-down () 混 人 ， 在 最 窗 的 屏幕 中 缩小 字号 。 
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.page-header { 
Ginclude media-breakpoint-down(xs) ( 
.display-3 ( 
padding-bottom: $spacer-y; 
font-size: $display4-size; 
text-align: center; 
} 
} 
} 


然后 切换 到 尺寸 更 大 的 屏幕 ， 调 整 浏览 如 窗口 ， 将 其 宽度 设置 为 768 像素 以 上 。 


此 时 ， 示 例 中 的 栏 应当 水 平 排列 ， 每 栏 占据 外 部 容器 中 50% 的 空间 (6 栏 )。 每 种 网 格 的 外 
部 容器 的 宽度 值 都 是 固定 的 ， 当 屏幕 宽度 大 于 1200 像素 时 ， 容 器 的 宽度 永远 是 1140 像素 。 


可 以 通过 添加 两 个 col-ma-6 类 来 实现 这 一 效果 : 


«div class-"col-xs-12 col-md-6"»«h1 class="display-3">Your<span>Company</span> 
«/hl1»«/div» 
«div class-"col-xs-12 col-md-6"» 


与 此 同时 ， 搜 索 框 应 当 浮 动 放 置 于 页 眉 区 域 的 右 侧 。 这 一 点 可 以 通过 添加 pull1-md-right 
类 来 实现 : 


<form class="form-inline pull-md-right"> 


其 中 ，pul1-mdq-right 类 会 在 中 型 屏幕 及 更 大 尺寸 的 网 格 环 境 中 对 相关 元 素 设置 float:right 
STE, ， 因 此 会 编译 为 以 下 CSS 代码 : 


@media (min-width: 768px) ( 
.pull-md-right ( 
float: right !important; 
} 
} 


在 以 上 制作 页 眉 的 过 程 中 ,你 可 能 会 发 现 ， 当 屏 幕 宽度 大 于 768 像素 而 小 于 992 像素 时 ， 公 
司 名 称 区 域 和 搜索 框 区 域 可 能 会 出 现 重 又 。 对 于 这 一 问题 ， 可 以 通过 将 col-ma-e 替换 为 
col-1g-6 来 解决 , 也 可 以 修改 CSS 代码 , 在 更 大 的 屏幕 尺寸 范围 内 缩小 公司 名 称 的 字号 。 可 以 
使 用 scss/includes/ page-header.scss 文件 中 的 SCSS 代码 来 实现 这 一 点 : 


@include media-breakpoint-down(md) ( 
.display-3 ( 
padding-bottom: $spacer-y; 
font-size: $display4-size; 
text-align: center; 
) 
} 
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最 后 , 修改 scss/includes/_page-header.scss 文件 , 在 大 尺寸 屏幕 下 定义 搜索 框 的 margin-top 上 
边 距 。 
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Ginclude media-breakpoint-up(md) ( 
[class^sz"col-"]:last-child { 
margin-top: $spacer-y * 2; 
j 
j 


调整 导航 条 及 首 屏 的 样式 


本 章 示例 中 ， 导 航 条 和 首 屏 代码 都 包含 在 <section> 元 素 中 ， 并 配置 有 背景 图 片 。 相 关 的 
html/includes/navigationheader.html 模板 中 的 HTML 代码 写法 如 下 : 


«section class-"nature"» 





«header» 

((» navbar}} 
«/header» 

((» jumbotron)) 


«/section» 


可 以 创建 scss/includes/ navigationheader.sess 这 一 新 的 Sass 局 部 文件 ， 并 在 其 中 编写 以 下 




















SCSS 代码 : 
// 免费 图 片 选 自 https://www.pexels.com/photo/landscape-nature-sunset-trees-479/ 
.nature { 
background-image:url('/images/landscape-nature-sunset-trees.jpg'); 
j 


请 注意 , landscape-nature-sunset-trees.jpg 图 片 文件 应 当 保 存在 项 目 中 的 assets/images/ H KA o 
如 之 前 所 述 ， 每 次 运行 构建 流程 时 该 图 片 文 件 都 会 被 自动 复制 到 临时 目录 site/images 里 。 





d 我 们 也 将 创建 html/includes/navbar.html 这 一 HTML 模板 ， 以 及 scss/ 
includes/ navbarscss 这 一 Sass 局 部 文件 。 并 在 其 中 复 用 第 1 章 内 有 关 响 应 式 导航 条 的 相关 代码 。 








可 以 修改 scss/includes/ navbar.sess 文件 ， 设 置 导 航 条 的 背景 


月 t 
.navbar ( 
// 背景 : AH; 
background: rgba(255,255,255,0.5); 
//GQinclude gradient-horizontal (green 


, white); 
} 





请 注意 ， 以 上 SCSS 代码 中 注释 掉 了 两 个 不 同 的 背景 色 方案 。 可 以 移 除 注释 ( 和 注释 掉 其 
他 的 ), 尝试 使 用 这 些 不 同 的 方案 。 如果 此 时 gulp 命令 正在 运行 , 则 可 以 直接 在 浏览 器 中 看 到 




















可 以 将 背景 色 值 作为 变量 保存 到 scss/includes/_variables.scss 文件 中 ,方便 之 后 复 用 。 





$navbar-background: rgba(255,255,255,0.5); 


2.11 使 用 构建 流程 ， 完 成 项 目 47 





除 此 之 外 ， 也 可 以 为 导航 条 的 背景 色 创 建 一 个 新 的 类 : 


.bg-nature { 
background: $navbar-background; 


} 


与 之 相应 的 HTML 代码 写法 如 下 : 


«nav class-"navbar navbar-dark bg-nature navbar-full" role="navigation"> 


至 于 首 屏 组 件 ， 我 们 将 直接 使 用 Bootstrap 文档 中 Jumbotron 组 件 的 HTML 代码 。 并 将 其 保 
存 到 html/includes/jumbotron.html 文件 中 , 同时 创建 scssincludes/_jumbotron.scss 这 一 对 应 的 Sass 
局 部 文件 。 


html/includes/jumbotron.html 文件 中 HTML 代码 的 写法 如 下 : 





«div class="container"> 
<div class="jumbotron"> 
«hl class="display-3">Hello, world!</h1> 
«p class-"lead"»This is a simple hero unit, a simple jumbotron- 
style component for calling extra attention to featured content or 
information.«/p» 
«hr class-"m-y-2"'» 
«p»It uses utility classes for typography and spacing to space content out 
within the larger container.«/p» 
«p class-"lead"» 
«a class="btn btn-primary btn-lg" href="#" role-"button"»Learn more</a> 
«/p» 
«/div» 
«/div» 


除了 已 经 涉及 的 container. display-* fM btn-* 类 ， 以 上 代码 中 还 出 现 了 一 些 新 的 
Bootstrap CSS 类 。 其 中 ，1eag 类 可 以 使 段落 突出 显示 。 而 <hr> 元 素 所 具有 的 m-y-2 类 则 将 水 
平 外 边 距 设 置 为 Sspace-y 高 度 值 的 两 倍 。Bootstrap 中 有 很 多 像 m-y-2 这 样 的 工具 类 ， 可 以 用 
来 设置 元 素 的 内 边 距 和 外 边 距 。 


这 些 工 具 类 的 命名 格式 为 {property}-{sides}-{size}, 其 中 property 的 值 为 oC 内 边 距 ) 
或 m (外 边 距 )，sides 的 值 为 1 ( 左 )、r Cr, € CEA b (下 )、x( 左 和 右 ) 或 y (上 和 下 )， 
size 的 值 介 于 0 和 3 之 间 (包括 0 和 3 本 身 )， 表示 $space-x 或 Sspace-y 的 倍数 。 


修改 完 HTML 代码 后 ， 编 辑 scss/includes/ jumbotron.scss 文件 中 的 SCSS 代码 : 





























.jumbotron { 
background-color: transparent; 
color: $lightest-color; 


} 


在 小 屏幕 中 ， 导 航 页 眉 如 下 图 所 示 。 
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在 完成 导航 和 首 屏 的 样式 调整 后 ， 接 下 来 我 们 调整 页 面 设计 中 产品 特性 部 分 的 样式 。 


2.12 ”调整 产品 特性 的 样式 


首 屏 组 件 下 方 显示 的 是 3 个 特性 。 其 中 每 一 个 特性 都 会 显示 成 下 图 中 的 样子 : 以 包含 照片 或 
图 标的 圆 形 图 片 开始 ， 继 之 以 标题 和 文字 介绍 段落 ， 最 后 是 行动 引导 按钮 。 


Hello, world! 


This is a simple hero unit, a simple jumbotron- 
style component for calling extra attention to 
featured content or information. 









































It uses utility classes for typography and spacing to space 
content out within the larger container. 


Learn more 





在 宽度 小 于 768 像素 的 屏幕 中 ,特性 会 以 从 上 到 下 的 顺序 显示 。 而 在 更 宽 一 些 的 屏幕 中 , 这 
些 特性 则 会 以 水 平 三 等 分 的 方式 排列 ， 如 下 图 所 示 。 
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Heading Heading Heading 
Donec sed odio dui. Etiam porta sem malesuada Duis mollis, est non commodo luctus, nisi erat Donec sed odio dui. Cras justo odio, dapibus ac 
magna mollis euismod. Nullam id dolor id nibh porttitor ligula, eget lacinia odio sem nec elit. facilisis in, egestas eget quam. Vestibulum id 
ultricies vehicula ut id elit. Morbi leo risus, porta Cras mattis consectetur purus sit amet ligula porta felis euismod semper. Fusce 
ac consectetur ac, vestibulum at eros. Praesent fermentum. Fusce dapibus, tellus ac cursus dapibus, tellus ac cursus commodo, tortor mauris 


commodo cursus magna. commodo, tortor mauris condimentum nibh. condimentum nibh, ut fermentum massa justo sit 


amet risus. 
View details » View details » 
View details » 














和 之 前 一 样 ,我们 会 创建 两 个 文件 :作为 HTML 模板 的 html/includes/features.html 和 作为 Sass 
局 部 文件 的 scss/includes/ features.scss。 


HTML 模板 文件 html/includes/features.html 中 的 HTML 代码 结构 如 下 OE: 有 关 产 品 特性 的 
具体 HTML 代码 已 被 忽略 ): 


«div class-"container features"> 
«div class="row"> 
«div class-"col-md-4"-» 

<!-- 第 一 个 特性 --> 
</div><!-- /.col-md-4 --» 
«div class-"col-md-4"-» 

«1-- 第 二 个 特性 --> 
«/div»«!-- /.col-md-4 --» 
«div class-"col-md-4"-» 

<!-- 第 三 个 特性 --> 


</div><!-- /.col-md-4 --» 
«/div»«!-- /.row --» 
</div> 


2 


row, 以 上 代码 中 的 col -ma-4 类 会 在 中 型 及 更 大 尺寸 的 12 网 格 中 令 相 关 元 素 占据 4 个 网 格 基本 
单元 。 而 用 于 兼容 小 型 设备 的 col-xs-12 类 则 已 被 忽略 。 


可 以 看 到 ， 该 代码 同样 使 用 了 Bootstrap 的 网 格 来 显示 特性 。 除 了 已 经 介绍 过 的 container 和 

















每 个 特性 内 的 HTML 代码 的 写法 如 下 : 


<img class="img-circle" 


src-"data:image/gif;base64,R01G...CRAEAOw--" alt-"Generic placeholder 
image" height-"140" width-"140"-» 

«h2»Heading«/h2» 

«p»Donec sed odio dui. ..... «/p» 


<p><a class="btn btn-primary" href="#" role-"button"»View details &raquo;«/a»«/p» 


其 中 img-circle 类 会 自动 将 图 片 处 理 为 以 圆 形 显示 。 你 可 以 用 自己 的 图 片 文件 替换 代码 
中 的 图 片 源 src-"data:image/gif;base64,R01G...CRAEAOw--", 





fi 
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可 以 访问 https://css-tricks.com/data-uris/, 了 解 更 多 有 关 图 片 元 素 data-URI 属性 
的 信息 。 
至 此 ， 即 可 编写 一 些 CSS 代码 来 优化 产品 特性 区 域 的 观感 。 在 scss/includes/_features.scss X 
件 中 编写 以 下 SCSS 代码 : 


.features { 
padding-top: $spacer-y; 





[Glass^s"'Gole"] £f 
text-align: center; 
j 
} 


除了 新 写 CSS 代码 外 ， 也 可 以 考虑 用 Bootstrap 中 预定 义 的 CSS 类 来 实现 相同 的 效果 。 
可 以 用 预定 义 的 工具 类 来 设置 产品 特性 上 方 的 内 边 距 ， 代 码 如 下 : 


<div class="container features p-t-1"> 


同时 借助 cext -xs-center 类 使 所 有 视 口中 特性 区 域 的 内 容 居 中 排列 : 


<div class="col-md-4 text-xs-center"> 


至 此 ， 我 们 完成 了 产品 特性 的 开发 ， 是 时 候 调整 页 脚 的 样式 并 完成 整个 项 目 了 。 








2.13 ”调整 页 脚 的 样式 


最 后 ， 作 为 同样 重要 的 一 环 ， 我 们 将 调整 页 脚 中 链接 的 样式 ， 并 以 此 完成 本 童 的 示例 项 目 。 
和 之 前 一 样 ， 我 们 会 通过 创建 HTML 模板 和 Sass 局 部 文件 来 实现 。 


其 中 ，html/includes/footer.html 这 一 HTML 模板 应 当 包 含 以 下 HTML 代码 : 











«footer class="page-footer"> 
<div class="container"> 
<div class="pull-xs-right"> 
<a href="https://twitter.com/bassjobsen"><i class="fa fa-twitter 
fa-lg"></i></a> 
<a href="https://facebook.com/bassjobsen"><i class="fa fa-facebook 
fa-lg"></i></a> 
«a href-"http://google.com/«bassjobsen"»«i class="fa fa-google-plus 
fa-1g"»«/i»«/a» 
«a href-"http://stackoverflow.com/users/1596547/bass-jobsen"»«i class="fa 
fa-stack-overflow fa-lg"»«/i»«/a» 
«a href-z"https://github.com/bassjobsen"»«i class="fa fa-github fa-lg"»«/i»«/a» 
«/div» 
«div»&copy; 2016 Bass Jobsen &middot; «a href-"i$"»Privacy«/a»&middot; 
«a href="#">Terms</a></div> 
</div> 
</footer> 
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该 页 脚 简 单 又 直观 。 它 包含 了 版 权 信 息 以 及 一 系列 社交 网 络 链接 。 其 中 社交 网 络 链接 会 用 
pull-xs-right 类 浮动 到 页 脚 的 右 侧 。 而 这 些 链接 的 图 标 则 来 自 Font Awesome 图 标 库 。fa-* 
这 些 CSS 类 并 不 是 Bootstrap 所 提供 的 。 


第 4 章 将 介绍 如 何 用 Sass 把 Font Awesome 的 CSS 代码 编译 到 本 地 CSS 中 。 而 此 处 我 们 只 需 
简单 地 通过 CDN 来 加 载 Font Awesome 的 CSS 代码 , 在 HTML 模板 文件 html/layouts/default.html 
中 用 以 下 方式 链接 CSS: 


<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 


做 完 这 两 步 后 ， 剩 下 的 就 只 是 设 定 背 景 、 链 接 和 图 标的 颜色 及 边 距 了 。 可 以 在 Sass 局 部 文 
Tt scss/includes/_ page-footerscss 中 输入 以 下 SCSS 代码 来 进行 调整 : 


.page-footer { 

background-color: $page-footer-background; 
color: $lightest-color; 
at 

Ginclude plain-hover-focus ( 

color: $lightest-color; 

} 
j 
padding: $spacer-vy 0; 
margin-top: $spacer-y; 


} 

该 代码 中 使 用 了 Bootstrap 的 plain-hover-focus() 混 入 , 一 次 性 设 定 元 素 在 普通 状态 、 
鼠标 悬 停 状态 和 获取 鼠标 焦点 状态 时 的 样式 。 如 之 前 所 讨论 的 ， 该 混入 使 用 了 媒体 查询 Level 4 
标准 的 hover 媒体 特性 。 

同样 , 可 以 在 该 例子 使 用 Bootstrap 的 工具 类 来 设 定 内 外 边 距 。 例 如 ,可 以 用 p-y-1l 和 m-t-1 
来 达到 相同 的 效果 : 


«footer class-"page-footer p-y-1 m-t-1"> 


这 就 是 整个 示例 项 目的 所 有 内 容 。 做 得 不 错 ! 
















































































2.14 用 Bootstrap CLI 运行 模板 


在 本 章 中 ,我 们 创建 了 构建 流程 ， 并 通过 运行 gulo 命令 创建 和 编译 单 页 面 模板 。 而 本 书 接 
下 来 则 会 用 Bootstrap CLI 来 配置 项 目 。 


可 以 在 使 用 Bootstrap CLI 时 ， 选 择 自己 所 偏好 的 启动 模板 。 与 本 章 内 容 类 似 ， 这 些 启动 模 
板 中 也 都 自 带 了 Gulp 或 Grunt 的 构建 流程 。 以 Bootstrap material design 模板 为 例 ， 可 以 通过 访问 
https://github.com/bassjobsen/bootstrap-material-design-styleguide 来 获取 其 源 代 码 。Bootstrap 会 从 
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GitHub 下 载 模板 ， 并 通过 调用 npm 来 运行 相关 脚本 。 


如 果 需 要 在 Bootstrap CLI 中 直接 使 用 自己 的 构建 流程 和 模板 , 则 只 需 在 package.json 文件 中 
添加 npm 脚本 即 可 ， 写 法 如 下 : 





"scripts": ( 
"build": "gulp deploy", 
"Start": "gulp" 


} 


2.15 JavaScript 任务 管理 器 不 是 必需 品 


本 章 介绍 了 如 何 用 Gulp 来 创建 构建 流程 。Gulp 和 Grunt 都 是 Node.js 环境 下 的 任务 管理 器 。 
而 在 上 一 节 中 ，Bootstrap CLI 会 调用 npm 命令 来 运行 脚本 。 受 此 思路 影响 ， 有 些 人 认为 可 以 直 
接 创 建构 建 流 程 ， 无 须 引 入 Gulp 或 Grunt。 























2.16 在 GitHub 上 发 布 成 果 


在 模板 制作 成 功 后 ， 不 妨 考 虑 将 其 发 布 到 GitHub 上 。 在 和 别人 分 享 工作 成 果 的 同时 ， 也 可 
以 借助 他 人 的 力量 来 改进 产品 。 








可 以 访问 https://guides.github.com/introduction/getting-your-project-on-github/, Y 
解 更 多 有 关 在 GitHub 上 发 布 项 目的 信息 。 





由 于 安装 Bower 包 和 Gulp 插件 时 使 用 了 --save-dev 选项 , 因此 bowerjson 和 package.json 
文件 中 会 包含 最 新 的 项 目 依赖 信息 。 当 发 布 项 目 时 ,这些 依赖 包 本 身 无 须发 布 。 使 用 者 会 下 载 项 
目 文件 ， 并 通过 运行 以 下 命令 来 安装 依赖 : 

bower install 

npm install 


运行 上 述 install 命令 后 ， 使 用 者 即 可 通过 gulp 命令 来 运行 项 目 。 除 了 这 种 方式 ， 也 可 
以 用 Bootstrap CLI 中 的 bootstrap watch 命令 。 


可 以 创建 .gitignore 文件 ， 确 保 仅 上 传 项 目 本 身 的 文件 至 GitHub。 该 .gitignore 文件 中 应 当 包 
含 以 下 几 行 : 


.DS Store 

bower. components 
node modules 
npm-debug.log 
.site 
.Sass-cache 
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2.47 ”小结 


本 章 介绍 了 如 何 用 Gulp 来 创建 Bootstrap 项 目的 构建 流程 。 你 可 以 将 这 一 流程 复 用 于 自己 的 
新 项 目 中 。 该 构建 流程 会 将 Sass 代码 编译 为 CSS 代码， 处理 JavaScript 代码 ， 并 运行 静态 Web 
服务 器 来 测试 结果 。 最 后 ,在 由 示例 代码 所 构成 的 单 页 面 营销 网 站 中 ,除了 少量 调整 ， 网 站 内 容 
大 多 由 Bootstrap 代码 及 组 件 所 组 成 。 而 之 前 所 打造 的 构建 流程 则 会 编译 代码 并 测试 结果 。 

在 本 章 所 做 的 少量 调整 中 ， 有 些 工作 会 涉及 Sass 知识 。 因 此 在 下 一 章 中 ， 我 们 将 更 详细 地 
探讨 Sass， 用 它 来 定制 Bootstrap, ， 并 创建 自己 的 博客 站 点 。 
































用 Bootstrap 和 Sass XE iil 
博客 站 点 








本 章 将 详细 介绍 Sass 这 一 CSS 预 处 理 器 。 根 据 Sass 团队 的 表述 : 
Sass 是 世界 上 最 成 熟 、 最 稳定 、 最 强大 的 CSS 扩展 语言 。 


Bootstrap 中 的 CSS 代码 是 用 Sass 来 编写 的 。 本章 将 主要 使 用 Bootstrap 组 件 来 搭建 一 个 简单 
的 站 点 。 你 首先 会 了 解 Sass 在 CSS 基础 上 所 添加 的 特性 ， 学 习 如 何 借助 Sass 以 DRY 的 风格 编 
写 更 高 效 的 代码 ， 然 后 用 Sass 修改 和 继承 Bootstrap。 


阅读 本 童 后 ， 你 将 : 


口 了 解 Sass 的 威力 ; 

O 学 习 如 何 修改 Bootstrap 的 CSS 代码 ; 

O 学 习 如 何 继承 Bootstrap 的 CSS 代码 ; 

口 学 习 如 何 复 用 Bootstrap 中 的 Sass 混入 。 





















































3.1 预期 结果 及 搭建 顺序 


根据 本 章 的 介绍 , 借助 Bootstrap, 你 将 部 署 一 个 自己 的 博客 站 点 。 该 站 点 由 标准 的 Bootstrap 
组 件 所 搭建 ， 辅 之 以 少量 微调 。 在 简单 介绍 Sass 后 ， 我 们 即 用 它 修改 和 继承 Bootstrap 中 的 CSS 
代码 ， 从 而 满足 博客 站 点 的 需求 。 


最 终 的 结果 将 如 下 图 所 示 。 
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Blog post 1 


16:00:00 01/01/2018 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. 
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, 
aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, 
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
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该 截图 展示 的 是 博客 站 点 在 宽度 小 于 768 像素 的 小 型 设备 中 的 效果 。 也 就 是 说 , 我 们 会 设置 
一 个 页 面 断 点 : e 像素 。 在 宽度 大 于 768 像素 的 屏幕 中 ， 导 航 将 水 平 排列 ， 网 页 上 也 会 显示 更 
多 新 的 功能 。 最 ZUR 果 如 下 图 所 示 。 
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Blog post 1 

16:00:00 01/01/2018 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla 
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum 
felis eu pede mollis pretium. 


Read more 
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3.2 项目 配置 与 要 求 

对 于 该 示例 项 目 ， 我 们 会 再 次 使 用 Bootstrap CLI， 并 借助 它 轻松 地 配置 项 目 。 而 在 使 用 
Bootstrap CLI 前 ， 首 先 需要 安装 Nodejs 和 Gulpo 

安装 完成 后 ， 可 以 运行 以 下 命令 ， 创 建新 项 目 : 


bootstrap new 

















在 命令 行 提示 中 输入 项 目 名 ,并 选择 “An empty new Bootstrap project. Powered by Panini, Sass 
and Gulp” 作 为 模板 ， 即 可 根据 设计 需求 开发 项 目 。 但 在 开始 前 ， 本 章 将 首先 介绍 Sass 和 定制 
策略 。 


3.8 Sass 在 项 目 开发 中 的 威力 


Sass 是 一 种 CSS 代码 预 处 理 器 ， 同 时 也 是 CSS3 的 一 个 扩展 , 它 加 入 了 一 系列 特性 : RU BE 
套 、 变 量 、 混 入 、 函 数 、 选 择 符 继承 ， 等 等 。 下 面 你 将 学 习 Sass 对 CSS 语法 的 扩展 ， 以 及 如 何 
借助 Sass 来 避免 重复 CSS 代码 的 出 现 。 
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3.3.1 XA EE 


使 用 规则 幅 套 可 以 极 大 地 提升 样式 编写 的 效率 。 比 如 ， 在 CSS 中 可 能 会 写 出 重复 多 次 的 先 
BAR: 


.navbar-nav { .. 

.navbar-nav > li ( ... } 
.navbar-nav » li» a ( ... ) 
.navbar-nav » li » a:hover, 
.navbar-nav > li > a:focus ( ... ) 


而 在 Sass F, HIA PARRER, Bn] JETPESPAHCSS HURHIRTR T ESXEPEIT ARETE: 


.navbar-nav { ... 
SALE et sc 
»aí... 
&:hover, 
&rfocus. ( ... F 
} 
} 
} 


编译 后 ， 上 述 规则 就 能 转变 成 标准 的 CSS 代码 。 虽 然 最 终结 果 一 样 ， 但 在 某 些 情况 下 ， 这 
种 藤 套 模式 可 以 让 Sass 代码 的 编写 和 维护 比 普通 的 CSS 更 简单 。 请 注意 ， 上 述 代 码 中 使 用 了 & 
这 一 父 选 择 符 引用 符 。 在 府 套 模式 中 ， 该 符号 指向 所 在 处 的 父 选 择 符 。 如 以 下 SCSS 代码 : 


.link ( 
&:hover ( 
color: black; 
} 
} 


编译 成 CSS 代码 后 为 : 


.link: hover ( 
color: black; 


) 
如 果 不 使 用 g 父 选择 符 引 用 符 ， 则 在 编译 后 的 CSS 代码 中 :hover 选择 符 前 会 多 一 个 空格 。 


在 Bootstrap 的 Sass 源 代码 中 ， 很 少 出 现 子 选择 符 和 元 素 选 择 符 。 般 套 模式 大 多 用 于 状态 选 
择 符 的 实现 。 以 之 前 的 navbar 为 例 ，Bootstrap 中 SCSS 代码 大 致 如 下 : 


.navbar-nav { 
.nav-link { 
color: $navbar-dark-color; 
Ginclude hover-focus { 
color: $navbar-dark-hover-color; 
} 
) 
} 
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元 素 状 态 ( :hover 和 :focus ) 由 hover-focus() 这 一 混入 所 设 定 。 当 $enable-hover- 
media-query 变量 设置 为 true 时， 该 混 人 还 能 实现 媒体 查询 Level 4 标准 中 的 hover 媒体 特性 。 


例如 ， 以 下 SCSS 代码 : 











Senable-hover-media-query: true; 
a ít 
Ginclude hover-focus { 
color: green; 
j 
j 


编译 成 CSS 代码 后 为 : 


a: focus. { 
color: green; 

} 

Gmedia (hover: hover) ( 
a:hover ( 

















color: green; 
j 
} 


本 章 稍 后 将 对 混入 做 详细 介绍 。 


请 注意 ，hover-focus () 混 入 的 内 部 也 使 用 了 & 这 一 父 选 择 符 引 用 符 ， 用 于 设 
定 :hover 和 :focus 选择 符 。 


3.8.2 ”变量 

















使 用 变量 , 即 可 在 指定 样式 值 后 实现 其 在 整个 样式 表 里 的 自动 引用 , 也 可 以 实现 修改 样式 值 
后 引用 处 的 自动 更 新 。 比 如 ， 可 以 用 以 下 方式 使 用 颜色 变量 : 


Goff-white:  t$e5e5e5; 
Gbrand-primary: #890000; 











由 于 所 有 SASS 文件 中 的 样式 规则 均 使 用 了 这 些 变量 ， 因 此 一 旦 修改 这 些 变 量 值 ， 整 个 网 站 
中 的 颜色 都 将 发 生 改变 。 


at 
color: Gbrand-primary; 
} 
.navbar { 
background-color: Gbrand-primary; 
.nav-link ( 
color: QGoff-white; 
j 
j 
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在 使 用 前 ， 所 有 的 变量 都 需 先行 声明 。 其 中 ， 可 用 !default 声明 来 设置 默认 值 ， 例 如 : 

Goff-white:  $e5e5e5 !default; 

可 以 借助 上 述 写法 来 编写 Sass 代码 ， 通 过 更 改 默认 变量 的 值 来 轻松 地 进行 修改 。 例 如 ， 以 
下 SCSS 代码 : 


Sdark-color: darkblue; 
Sdark-color: darkgreen !default; 





pi 
color: $dark-color; 


} 
编译 成 CSS 代码 后 为 : 


pl 
color: darkblue; 


} 


Bootstrap 中 所 有 的 变量 都 定义 在 _variables.scss 这 一 文档 齐全 的 局 部 文件 中 。 由 于 变量 声明 
时 均 使 用 了 1!qefault， 因 此 可 以 在 _variables.scss 文件 最 开头 的 aimport 语句 之 前 添加 新 声明 ， 
轻松 地 覆 写 这 些 变量 的 值 。 
对 于 熟悉 Less 的 读者 来 说 ， 需 要 注意 的 是 : Sas 中 变量 不 支持 懒 加 载 ， 同 时 也 
3 没有 采用 最 后 定义 的 变量 优先 级 最 高 的 策略 。 另 外 ， 在 Sass 中 变量 在 声明 后 广 
能 使 用 。 








3.3.3 混入 


借助 混 人 ， 可 以 以 简洁 而 又 易于 管理 的 形式 来 生成 一 整套 规则 。 比 如 ， 根 据 <a> 标 签 或 其 他 
元 素 的 不 同 状态 设 定 不 同 的 样式 时 ， 可 以 用 它 来 简化 该 任务 。 


以 之 前 提 到 的 Bootstrap 中 的 hover-focus () 混 人 为 例 。 该 混 人 的 具体 代码 如 下 : 


Qmixin hover-focus ( 

Gif S$enable-hover-media-query ( 
&:focus ( Gcontent } 
Ginclude hover { Gcontent } 

} 

Gelse { 

&:focus, 
&:hover ( 
Gcontent 
} 
} 
} 


当 需 要 时 ， 可 以 使 用 该 混入 : 
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.page-link ( 
QGinclude hover-focus() ( 
color: tomato; 
j 
} 


编译 后 ， 每 个 元 素 都 会 拥有 其 相应 的 CSS 样式 。 当 senable-hover-media-query 变量 的 
值 设 定 为 false 时 ， 上 述 示例 将 编译 成 以 下 CSS 代码 : 


.page-link:focus, .page-link:hover ( 

color: tomato; } 

Bootstrap 在 其 早期 版 本 中 使 用 了 很 多 混入 操作 ， 用 于 在 编译 的 CSS 代码 中 加 入 浏览 器 引擎 
前 级 。 对 于 需要 编写 多 个 引擎 前 级 ， 以 获取 跨 浏览 右 支 持 的 那些 CSS 属性 来 说 ， 借 助 混 人 即 可 
用 单行 代码 声明 来 实现 需求 。 根 据 混入 写法 的 不 同 ， 开 发 者 也 可 单独 添加 或 移 除 某 个 特定 CSS 
属性 的 引擎 前 绥 。 


而 如 第 2 章 所 示 ， 如 今 浏 览 需 引擎 前 绥 是 通过 autoprefixer 来 自动 添加 的 。 




























































































3.8.4 ”操作 


可 以 用 Sass 中 的 操作 来 进行 包括 变量 运算 在 内 的 数学 运算 。 例 如 ， 用 以 下 写法 对 某 个 颜色 
进行 变 亮 或 变 暗 操作 ， 从 而 创建 颜色 变 体 : 


a:hover ( darken(Glink-color, 15%); ) 





在 上 述 SCSS 代码 中 ，aqarken() 是 Sass 中 自 带 的 颜色 函数 。 除 了 darken(), Sas 中 包含 
了 很 多 可 以 直接 使 用 的 操作 函数 ， 涉 及 颜色 、 字 符 串 、 数 值 、 列 表 、 有 映射、 选择 符 等 。 此 外 ,还 
能 添加 自 定义 函数 。 








有 关 Sass 中 的 自 带 函数 ， 可 以 参考 http://sass-lang.com/documentation/Sass/Script/ 
Functions.html。 


还 可 以 计算 网 格 系统 中 的 内 边 距 值 。 以 下 代码 取 自 Bootstrap 中 的 mixins/ grid.sess 源 文件 ， 
该 代码 会 将 container 类 的 内 边 距 设 置 为 Sgutter 变量 值 的 一 半 : 


Gmixin make-container($gutter: $grid-gutter-width) ( 
margin-left: auto; 
margin-right: auto; 
padding-left: ($gutter / 2); 
padding-right: ($gutter / 2); 
Gif not $enable-flex ( 
Ginclude clearfix(); 
j 
} 


作为 Bootstrap 源 代码 的 一 部 分 ,mixins/_grid.scss 文件 会 出 现在 bower_components 文件 夹 中 。 
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3.4 文件 引入 


借助 Sass 的 编译 机 制 ， 可 以 引入 并 将 多 个 文件 拼合 为 单个 CSS 文件 。 在 这 一 过 程 中 ， 可 以 
站 定 文件 引入 的 顺序 ， 根 据 自己 的 级 联 需求 来 精确 组 织 最 终 所 需要 的 样式 表 。 


Bootstrap 的 引入 文件 bootstrap.scss 首先 会 引入 必需 的 变量 和 混入 。 然 后 ， 引 入 Sass 版 
normalize.css ( 取代 CSS 重 置 )， 以 及 用 于 打印 机 媒体 的 基本 样式 。 之 后 ， 引 入 核心 样式 ， 内 容 
包括 : 新 的 reboot 模 块 (_reboot .scss ), 排版 基础 样式 (_type.scss ) 等 。 最 终 , bootstrap.scss 
文件 的 最 初 几 行 代码 如 下 : 

// 核心 变量 与 混入 

QGimport "variables"; 

Qimport "mixins"; 

















// €X 51 

Qimport "normalize"; 

Qimport "print"; 

编译 结果 为 单个 CSS 文件 ， 其 样式 级 联 顺 序 正如 预期 : 通用 样式 定义 先 于 特殊 样式 ， 组 件 
样式 定义 先 于 工具 样式 。 





模块 化 文件 组 织 


由 于 可 以 将 不 同 的 文件 引入 到 同一 处 , 我 们 就 能 轻松 地 对 样式 资源 进行 分 组 , 在 不 同 的 文件 
中 对 其 进行 维护 。 因 此 ，Bootstrap 源 代 码 中 有 很 多 的 Sass 文件 : 一 个 文件 负责 导航 条 的 样式 ， 
另 一 个 文件 负责 按钮 ， 其 他 一 些 文件 负责 警告 框 、 传 送 带 样式 等 ,不 一 而 足 。 而 所 有 这 些 样式 文 
件 最 终 都 会 引入 到 bootstrap.scss 文件 中 。 


正 因 如 此 ， 再 加 上 其 他 的 一 些 原 因 ，Sass 和 别 的 CSS 预 处 理 器 全 然 已 成 为 Web 开发 最 佳 实 
践 中 的 一 环 ， 而 绝 非 流行 一 时 。 大 多 数 开发 者 都 认为 Sass 等 预 处 理 需 是 CSS 技术 的 未 来 。 




















3.5 使 用 SCSS 检查 工具 编写 更 简洁 易 读 的 代码 


第 2 章 介绍 了 如 何在 构建 流程 中 整合 SCSS-lint 工具 。 除 此 之 外 ， 也 可 以 在 命令 行 中 使 用 该 
工具 检查 代码 。 

SCSS-lint 不 仅 会 检查 语法 和 代码 样式 ， 还 有 助 于 编写 复 用 性 更 好 的 代码 。 当 在 配置 文件 中 
开启 colorvariable 检查 时 , 工具 就 会 检查 代码 中 的 颜色 值 ， 并 就 硬 编码 色 值 的 使 用 向 开发 者 
提出 警告 。 大 多 数 情况 下 ， 将 颜色 值 赋 给 某 个 变量 是 更 好 的 选择 。 这 么 做 可 以 复 用 色 值 ， 且 能 
做 到 一 处 修改 多 处 生效。 


请 注意 ,为 了 写 出 易 读 性 和 复 用 性 更 好 的 代码 ， 选 择 变量 名 称 时 还 需 仔细 其 酌 。 
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可 以 访问 http://webdesign.tutsplus.com/tutorials/quick-tip-name-your-sass-variables- 
modularly-webdesign-13364， 了 解 一 些小 诀窍 。 


如 Sacha Greif 所 建议 的 ，Bootstrap 本 身 也 使 用 了 融 函 数 式 变量 与 描述 式 变量 于 一 体 的 双 层 
系统 。 





3.6 Sass 定制 策略 


根据 过 往 经 历 和 想法 的 不 同 ， 可 以 采取 多 种 策略 来 复 用 Bootstrap 中 的 Sass 代码 ， 将 其 定制 
为 自己 的 CSS 代码 。 每 种 策略 各 有 优 劣 ， 开 发 者 可 以 根据 自己 的 需要 综合 使 用 多 种 策略 来 实现 
目标 。 


本 书 将 展示 各 个 策略 的 使 用 ， 并 介绍 适用 的 候选 方案 。 


3.6.1 用 变量 进行 定制 


如 之 前 所 介绍 的 ， 可 以 用 变量 将 经 常 使 用 的 值 定义 在 一 处 。 而 Bootstrap 的 源 文 件 
scss/ variables.scss 中 就 自 带 了 大 量 组 织 良好 、 文 档 齐 全 的 变量 。 


以 变量 sprand-primary 为 例 ， 该 变量 也 被 用 于 定义 其 他 变量 的 值 。Bootstrap 的 源 文件 
scss/ variables.scss 中 包含 以 下 内 容 : 














$link-color: $brand-primary !default; 
S$component-active-bg: $brand-primary !default; 
S$btn-primary-bg: $brand-primary !default; 
$pagination-active-bg: $brand-primary !default; 
$pagination-active-border: $brand-primary !default; 
$label-primary-bg: $brand-primary !default; 
$progress-bar-bg: $brand-primary !default; 


而 在 其 他 的 一 些 Sass 文件 中 ， 也 可 以 发 现 Sbrand-primary 变量 的 使 用 : 


scss/_utilities-background.scss: Ginclude bg-variant('.bg-primary', $brand- 
primary); 

ScsSs/ card.scss:  Ginclude card-variant($brand-primary, $brand-primary); 
Scss/ utilities.scss: Ginclude text-emphasis-variant('.text-primary', 
Sbrand-primary); 


上 述 代码 中 的 所 有 变量 都 会 被 用 于 生成 Bootstrap 中 预定 义 的 CSS 类 。 你 可 以 使 用 这 些 变量 
来 设置 组 件 的 颜色 及 样式 。 例 如 ， 通 过 btn-primary 和 progress-primary 类 来 分 别 设置 按 
钮 与 进度 条 的 样式 。 同 时 ， 可 以 用 bg-variant () 混 和 来 生成 Sbrand-primary 变量 所 对 应 的 
背景 色 。 相 关 按 钮 的 HTML 代码 如 下 : 


«button class-"btn btn-primary">Button</button> 
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如 果 网 站 是 由 包含 *-primary 类 的 组 件 所 组 成 的 ， 则 开发 者 可 以 轻松 地 通过 修改 $brand- 
primary 变量 的 值 来 更 改 网 站 的 观感 。 











本 章 将 声明 一 批 新 的 变量 , 同时 保持 Bootstrap 的 默认 值 不 变 。 而 在 项 目 中 添加 自 定 义 的 Sass 
代码 时 ,可 以 使 用 Bootstrap 中 的 变量 。 例 如 , 可 以 用 sspacer (-*) 变量 来 设置 外 边 距 与 内 边 距 。 
以 下 SCSS 代码 展示 了 如 何 用 Bootstrap 变量 来 设置 padding-top 属性 : 


main { 
article { 
padding-top: $spacer-y; 
) 
} 











请 注意 ， 上 述 SCSS 代码 中 使 用 了 main 元 素 选择 符 。 而 Bootstrap 的 Sass 源 代 
码 中 避免 使 用 元 素 选择 符 。 除 了 使 用 main 这 一 元 素 选 择 符 ， 开 发 者 也 可 以 用 

3 main 类 甚至 main-article 类 来 代替 。 使 用 类 选择 符 而 非 元 素 选 择 符 有 助 于 写 
出 复 用 性 更 好 的 CSS 代码 ， 而 代价 则 是 必须 在 HTML 中 添加 额外 的 CSS. 


3.6(2 ”扩展 Bootstrap 的 预定 义 CSS 类 








Sass 中 支持 Gextena 功能 。 该 功能 使 得 目标 选择 符 可 以 继承 别 的 选择 符 中 的 样式 。 以 下 例 
子 展示 了 eextend 功能 的 使 用 : 





$primary-color-dark: 43303F9F; 


.selector1 ( 
color: $primary-color-dark; 


} 


.Selector2 { 
Gextend .selector1; 


} 





由 SCSS 编译 成 的 CSS 代码 为 : 


.Selectorl, .selector2 ( 
color: $303F9F; 
) 














REGERE, HrEIUBIEE EE MUT d 23S. TREE HTML 中 只 使 用 
到 新 的 selector2 类 的 情况 下 ， 这 种 做 法 还 会 造成 代码 元 余 。 


与 之 相对 ， 占 位 选择 符 可 以 在 不 造成 CSS 代码 元 余 的 情况 下 ,定义 需要 复 用 的 选择 符 代 


码 。 除了 以 $ 符 号 开头 外 ， 占 位 选择 符 的 写法 与 普通 的 选择 符 相 同 , 但 不 会 输出 编译 后 的 CSS 
代码 : 
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$primary-color-dark: #303F9F; 


%selector1 ( 
color: $primary-color-dark; 


} 


.Selector2 { 
Gextend %selector1; 


} 
上 述 SCSS 代码 中 使 用 了 sselectorl 这 一 占 位 选择 符 ， 编 译 后 的 CSS 代码 为 : 

















.Selector2 { 
color: #303F9F; 
} 


0 Bootstrap 的 Sass 源 代码 中 避免 使 用 @extend 功能 ， 也 不 含 占 位 选择 符 。 


第 1 章 介 绍 过 默认 情况 下 如 何 用 扩展 £1ui1á-img 类 的 方法 来 制作 响应 式 图 片 的 内 容 。 


3.6(3 ”使 用 / 复 用 Bootstrap 中 的 混入 

在 项 目 中 编写 定制 CSS 代码 时 ， 可 以 考虑 复 用 Bootstrap 中 的 混入 。 

比如 ， 在 创建 定制 的 按钮 和 时， 除了 可 以 修改 Bootstrap 中 的 变量 值 ， 也 可 以 使 用 以 下 SCSS 
代码 来 实现 : 


.btn-accent-color { 
@include button-variant (#fff, $accent-color, #fff); 


} 
使 用 以 上 SCSS 代码 后 ， 即 可 用 下 述 HTML 代码 来 创建 颜色 为 saccent-color 的 按钮 : 
«button class-"btn btn-primary">Button</button> 


而 当 用 float 属性 在 HTML 中 设置 浮动 元 素 后 , 某 些 情况 下 就 有 必要 清除 此 浮动 。 使 用 CSS 
中 的 clearfix 可 以 在 不 添加 任何 额外 标记 的 情况 下 清除 浮动 元 素 。 








qp 可 以 访问 https://css-tricks.com/all-about-floats/, HIA X 3p 2b 89 3E 28 V] 


Bootstrap 中 自 带 了 提供 clearfix 的 混入 ， 可 以 在 自己 定制 的 SCSS 代码 中 复 用 这 些 混 





.Selector { 
@include clearfix(); 


} 
本 章 稍 后 将 介绍 如 何 使 用 Bootstrap 中 的 Sass 混入 和 变量 来 创建 自己 的 语义 化 网 格 系统 。 
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混入 使 得 开发 者 在 非 Bootstrap 项 目 中 也 能 用 上 Bootstrap 的 CSS。 当然 , 如 之 后 的 章节 所 述 ， 
你 也 能 在 Bootstrap 项 目 中 使 用 其 他 的 Sass 代码 。 





3.6.4 Sass 函数 


在 之 前 的 章节 中 ， 你 已 经 接触 了 Sass 中 自 带 的 函数 。 而 除 此 之 外 ， 也 可 以 在 Sass 中 自 定义 
新 的 函数 。 这 些 函 数 不 像 混入 那样 会 设 定 CSS 的 属性 , 而 是 会 返回 一 个 具体 的 值 。 以 下 SCSS 代 
人 码 展示 了 一 个 有 关 Sass 函数 的 简单 例子 : 

@function three-times($x) { 

Greturn 3 * $x; 
} 
pl 
margin: three-times(4)px; 

} 

在 该 代码 中 ，three-times () 函数 会 将 输入 值 的 3 倍 作为 结果 返回 ， 因 此 编译 后 的 CSS fX 
码 结果 为 : 

pl 


margin: 12 px; 


} 


3.0.5 ” 复 用 他 人 的 代码 


除了 Bootstrap ， 很 多 别 的 项 目 也 使 用 了 Sass。 你 可 以 轻松 地 将 别 的 非 Bootstrap 项 目 中 的 文 
件 引 入 到 自己 的 项 目 中 。 前文 介绍 了 如 何在 项 目 里 使 用 现成 的 混入 。 除 非 调 用 这 些 混入 , 否则 其 
在 最 终 编译 生成 的 CSS 中 是 不 会 产生 输出 的 。 


本 章 将 介绍 使 用 网 络 上 的 混和 来 生成 CSS 三 角形 。 







































































Compass 


Compass 是 一 个 CSS 写作 框架 ， 可 以 帮助 编写 CSS 代码 。 该 框架 依赖 Ruby， 因 此 如 果 需 
要 在 Bootstrap 项 目 中 使 用 Compass， 就 必须 在 Gulp 构建 流程 中 用 gulp-ruby-sass 插件 来 替换 
gulp-sass 插件 。 使 用 gulp-ruby-sass 插件 后 ， 即 可 通过 设置 compass 选项 为 true 来 启用 Compass 
的 功能 。 



































€ 可 以 访问 http//compass-style.org, X44 -X Compass 框架 的 更 多 内 容 。 


3.7 ”编写 自己 的 定制 SCSS 代码 
在 了 解 了 Sass 的 基础 知识 后 ， 就 可 以 开始 编写 自己 的 定制 CSS 代码 了 。 还 记得 本 章 开 始 时 
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所 展示 的 博客 网 站 的 布局 吗 ? 


正如 第 2 章 所 介绍 的 ,除了 CSS 代码 ,我 们 对 HTML 代码 也 进行 模块 化 HTML 模板 由 Panini 
编译 ， 存 储 于 项 目 中 的 html 文件 夹 中 。 




















3.7.1 配色 方案 


写 项 目的 第 一 步 是 确定 配色 方案 。 打 开 包 含 Bootstrap 变量 信息 的 scss/includes/ | 
variables.scss 文件 。 因 为 我 们 将 在 项 目 中 使 用 Bootstrap 的 默认 变量 值 ( 特殊 情况 除外 )， 所 以 可 
以 将 该 文件 中 的 变量 全 部 删除 。 


修改 完 后 ， 在 scss/includes/_variables.scss 文件 中 编辑 以 下 SCSS 代码 : 





E 









































$primary-color-dark: #303f9f; 
$primary-color: 413f51b5; 
$primary-color-light: dc5cae9; 
Saccent-color: 4ff5722; 
S$accent-color-light: #ffab91; 
$dark-color: #000; 

Slight-color: #fff; 


可 以 运行 gulp 或 bootstrap watch 命令 ， 启动 浏览 器 访问 http://localhost:8080， 查 看 阶 
段 性 成 果 。 


添加 配色 方案 后 ， 项 目 本 身 依 旧 是 空白 的 。 因 此 是 时 候 开 始 调整 了 。 在 文件 未 尾 添加 以 下 
SCSS 代码 : 





























$body-bg: $gray-lighter; 
$body-color: $dark-color; 
$link-color: $accent-color; 




















上 述 代 码 中 ，sgray-lighter Æ Bootstrap 中 的 默认 变量 。 由 于 variables.scss 文件 是 在 
Bootstrap 源 文件 之 前 引入 的 ， 因 此 需要 将 Bootstrap 中 默认 的 颜色 变量 复制 到 该 文件 的 头 部 ， 才 
能 使 用 Sgray-lighter 的 值 。 























上 述 代码 对 <pbody> 元 素 的 背景 色 和 字体 颜色 的 默认 值 进行 了 重 写 ， 同 时 也 更 改 了 超 链 接 的 


修改 后 ，scss/includes/_variables.scss 文件 的 内 容 如 下 : 


// 颜色 

// 

// 整个 Bootstrap 项 目 中 所 使 用 的 灰 度 梯度 和 主 色 调 
Sgray-dark: #373a3c; 

$gray: 4$55595c; 
$gray-light: #818a91; 


$gray-lighter: deceeef; 
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$gray-lightest: 4S£7£7£9; 
Sbrand-primary: 30275488; 
Sbrand-success: #5cb85c; 
Sbrand-info: #5bc0de; 
Sbrand-warning: #f0ad4e; 
Sbrand-danger: #d9534f; 

// 主题 颜色 

$primary-color-dark: 3303f9f; 
$primary-color: #3f51b5; 
$primary-color-light: #c5cae9; 
Saccent-color: 41££5722; 
Saccent-color-light: #ffab91 !default; 
Sdark-color: #000 !default; 
Slight-color: #f£fff !default; 
$body-bg: $gray-lighter !default; 


S$body-color: $dark-color !default; 
Slink-color: $accent-color !default; 


3.7.2 准备 HTML 模板 


首先 ， 修 改 默认 的 布局 以 满足 设计 需求 。 编 辑 html/layouts/default.html 文件 并 修改 <bodqy> 
区 域 ， 在 其 中 使 用 HIML 局 部 文件 。 修 改 后 的 <body> 区 域 的 HTML 代码 如 下 : 


«body» 
((» page-header)) 
{{> navbar)) 
«div class-"main-content container bg-dark"» 
«div class-"row"» 
«main class-"col-md-9" role-"content"-» 
{{> body}} 
</main> 
«aside class="col-md-3"> 
{{> sidebar}} 
</aside> 
</div> 
</div> 
{{> footer}} 
{{> footerjavascripts}} 
</body> 


然后 ,根据 上 述 HTML 代码 的 结构 ,在 html/includes 目录 中 创建 page-headerhtml navbar.html、 
sidebar.html 和 footer.html 等 模板 文件 。 由 于 项 目 中 的 Sass 代码 也 是 模块 化 的 ， 因 此 可 以 在 


scss/includes/ 目 录 中 创建 page-headerscss,  navbarscss, 、_sidebar.scss 和 footer.scss 等 Sass 局 部 
文件 。 


上 述 模 板 中 ，{{> body}} 片 段 最 终 会 被 html/pages 目录 里 的 文件 内 容 所 替换 。 而 在 目前 的 
例子 中 ， 这 一 替换 的 内 容 指 的 就 是 html/pages 目录 里 唯一 的 文件 index.html。 由 于 本 章 的 例子 创 
建 的 是 博客 站 点 布局 ， 因 此 我 们 还 创建 了 scss/includes/ blog.scss 这 一 Sass 局 部 文件 ， 用 于 调整 
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博客 内 容 的 样式 ， 其 中 包含 博客 目录 。 
最 后 ， 这 些 新 的 Sass 局 部 文件 必须 在 scss/app.scss 文件 中 引入 : 


Gimport "includes/variables"; 
Gimport "includes/bootstrap"; 


// 页 面 元 素 
Gimport "includes/page-header"; 
Gimport "includes/navbar"; 


Gimport "includes/sidebar"; 
Gimport "includes/footer"; 


// 页 面 
Gimport "includes/blog"; 


至 此 ， 文 件 结构 的 设置 即 告 完成 ， 可 以 开始 调整 页 眉 的 样式 了 。 








3.7.8 ”调整 页 丑 样 式 


html/includes/page-header.html 文件 中 页 眉 的 HTML 代码 如 下 : 


«header class-"container bg-primary-color-dark"-» 
«div class="row"> 
«div class-"col-xs-12"'» 
«hl class-"display-3"»Your blog«/h1» 
</div> 
</div> 
</header> 


除了 bg-primary-color-dark 类 ， 上 述 HTML 代码 中 所 有 的 css 类 都 是 Bootstrap 中 所 
预定 义 的 。 


而 scss/includes/ page-header.scss 文件 中 bg-primary-color-dark 类 的 SCSS 代码 如 下 : 





.bg-primary-color-dark ( 
color: $light-color; 
background-color: $primary-color-dark; 


} 
除了 定制 SCSS 代码 ， 也 可 以 使 用 Bootstrap 中 的 bg-variant () 混 入 来 调整 背景 色 : 


Ginclude bg-variant('.bg-primary-color-dark', $primary-color-dark); 


«b 请 注意 , bg-variant () 混 入 会 将 字体 颜色 设置 为 白色 ,并 在 声明 相关 的 颜色 时 


会 使 用 !important 3&6], 





对 于 上 述 方案 来 说 ， 由 于 需要 将 CSS 类 添加 到 HTML 代码 中 ， 因 此 使 用 该 方案 时 需 同时 修 
WE SCSS 和 HTML。 你 也 可 以 修改 html/includes/page-header.html 文件 ， 在 不 使 用 任何 CSS 类 的 
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情况 下 实现 相同 的 效果 : 


<header> 
<div> 
<div> 
«hl»Your blog«c/hl» 
«/div» 
</div> 
</header> 


可 以 通过 scss/includes/ page-header.sess 文件 中 的 以 下 SCSS 代码 来 修改 之 前 HTML 代码 的 
样式 : 


body { E 
header:first-of-type ( 


Ginclude make-container(); 
Ginclude make-container-max-widths(); 
background-color: $primary-color-dark; 
color: $light-color; 
» div ( 
Ginclude make-row(); 
» div ( 
Ginclude make-col-ready(); 
Ginclude make-col(12); 
hi ( 
Gextend .display-3; 
} 





j 
} 
} 


上 述 SCSS 代码 中 有 四 层 骨 套 关系 。 这 使 得 当 改 变 HTML 代码 结构 时 ,CSS 代码 很 容易 出 错 。 
同时 ， 这 么 做 还 降低 了 CSS 代码 的 可 复 用 性 。 


如 果 SCSS 代码 无 法 生成 任何 的 CSS 类 ， 那 就 意味 着 HTML 代码 无 法 复 用 这 段 内 容 。 


另 一 方面 ，eextend .display-3; 依 旧 会 在 编译 后 的 CSS 代码 中 生成 .display-3 这 种 永 
远 都 不 会 被 用 到 的 选择 符 。 由 于 使 用 了 Bootstrap 中 的 Sass 网 格 混入 ， 我 们 不 再 需要 编译 好 的 网 
格 系统 CSS 类 。 而 使 用 make-containetr () ,make-container-max-widths() ,make-row () 
和 make-col-span () 这 样 的 网 格 混和 人 也 降低 了 HTML 标记 的 语义 性 。 可 以 说 ，Bootstrap 中 网 
格 系统 的 CSS 解决 方案 需要 用 到 container 类 和 row 类 ， 而 这 与 纯粹 的 语义 化 HTML 编码 是 
格格 不 人 的 。 即 使 切换 到 Flexbox 模式 ， 开 发 者 也 依旧 需要 这 些 封装 容器 的 帮助 。 


如 果 在 项 目 中 使 用 了 Bootstrap 的 网 格 Sass 混入 ， 那 么 开发 者 就 能 在 不 依赖 预定 义 网 格 类 的 
情况 下 轻松 地 编译 Bootstrap。 而 将 senable-grid-classes 这 一 Sass 变量 设 定 为 false, 即 可 
在 编译 后 的 Bootstrap 代码 中 去 除 网 格 系统 类 。 
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对 于 上 述 两 种 方案 来 说 ,判定 哪 种 方案 更 好 并 不 容易 。 具 体 的 选择 取决 于 需求 和 个 人 偏好 。 
总 体 来 说 ， 代 码 量 最 小 的 方案 往往 复 用 性 有 所 缺失 ， 而 简洁 性 最 佳 的 HTML 往往 拥有 最 佳 可 维 
护 性 。 


无 论 选择 哪 种 方案 ， 都 需 保 持 一 致 ， 避 免 在 同一 个 项 目 中 使 用 不 同 的 方案 。 
代码 修改 完成 后 ， 页 眉 会 如 下 图 所 示 。 




















Your blog 








下 一 节 将 介绍 如 何 调整 导航 条 样式 。 


3.7.4 调整 导航 条 样式 


是 时 候 来 调整 导航 条 的 样式 了 。 我 们 将 使 用 第 1 章 中 响应 式 导 航 条 的 HTML 代码 ， 将 其 复 
制 到 htmlincludesmnavbarhtml 文件 中 。 相 关 代码 应 当 封 装 在 含有 bg-primary-color 类 的 
container 元 素 中 : 














«div class-"container bg-primary-color"> 
«button class-"navbar-toggler hidden-md-up pull-xs-right" type-"button" 
data-toggle-"collapse" data-target-"fcollapsiblecontent'-» 


«/button» 
«nav class-"navbar navbar-dark navbar-full" role-"navigation"» 
«ul class-"nav navbar-nav navbar-toggleable-sm collapse" 
id="collapsiblecontent"> 
«li class="nav-item"> 
«a class-"nav-link active" href="#">Home «span class="sr-only">(current) 
«/span»«/a» 
</li> 
<li class="nav-item"> 
«a class-"nav-link" href="#">Features</a> 
«/li» 
«li class-"nav-item"- 
«a class-"nav-link" href-"i$"»Pricing«/a» 
</li> 
<li class="nav-item"> 
<a class="nav-link" href="#">About</a> 
</li> 
</ul> 
</nav> 
</div> 


正如 代码 中 所 展示 的 ， 我 们 需要 创建 一 个 新 的 bg-primary-color 类 。 在 scss/includes/ 
_navbar.scss 文件 中 编辑 以 下 SCSS 代码 : 
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.bg-primary-color ( 
background-color: $primary-color; 
color: $light-color; 


} 


此 时 导航 条 会 如 下 图 所 示 。 


Your DIog 


Home F 








而 当 在 窗口 宽度 小 于 768 像素 的 浏览 器 中 观察 结果 时 ， 导 航 条 会 发 生 折 项， 如 下 图 所 示 。 = 


Your blog 


如 第 1 章 所 提 到 的 , 响应 式 导 航 条 的 实现 会 依赖 JavaScript E ETR, 我 们 将 导航 
条 中 的 链接 两 端 对 齐 。 在 scss/includes/ navbar.sess 文件 中 ， 修 改 以 下 SCSS 代码 ， 将 链接 调整 为 
两 端 对 齐 : 

.navbar ( 


Ginclude nav-justified; 


} 























nav-justified 这 一 混入 并 不 是 由 Bootstrap 所 提供 的 。 你 可 以 在 includes/mixins/ nav-justified. 
sess 文件 中 找到 该 混入 。 如 需 了 解 更 多 相关 信息 , 可 以 访问 http://bassjobsen.weblogs.fm/bootstrap- 
4s-responsive-navbars/。 该 混入 是 通过 includes/ mixins.scss 这 一 Sass 局 部 文件 而 引入 的 。 之 后 ， 
我 们 将 通过 相同 的 方式 来 引入 其 他 的 混入 单元 。 


默认 情况 下 ，nav-justified 混入 所 设置 的 响应 式 断 点 为 768 像素 。 上 述 示例 很 好 地 展示 
了 对 其 他 混入 的 复 用 是 一 件 轻 而 易 举 的 事情 。 


在 链接 两 端 对 齐 后 ， 就 可 以 在 scss/includes/_navbar.scss 文件 中 设置 nav 链接 于 active 和 
hover 状态 下 的 颜色 ， 代 码 如 下 : 


.navbar { 
.nav-link { 
&.active, 
&:hover ( 
background-color: $accent-color; 
} 
} 
} 


在 浏览 需 中 观察 结果 ， 可 以 看 到 页 面 如 下 图 所 示 。 
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而 当 调整 浏览 器 视 口 使 其 宽度 小 于 768 像素 时 ， 就 会 发 现 一 些 需 要 调整 的 地 方 。 


首先 , 导航 链接 会 和 汉堡 按钮 重 琶 。 预 期 中 点 击 汉堡 按钮 后 会 显示 折 又 的 菜单 ,但 实际 上 却 
由 于 重 芭 而 导致 点 击 失 效 。 可 以 通过 将 汉堡 按钮 的 HTML 代码 移 到 页 眉 中 来 解决 这 一 问题 。 
html/includes/page-header-html 文件 中 HTML 代码 如 下 : 





<header class="container bg-primary-color-dark"> 
<div class="row"> 
«div class="col-xs-12 bg-primary-color-dark"'» 
«button class-"navbar-toggler hidden-md-up pull-xs-right" type-"button" 
data-toggle-"collapse" data-target-"ftcollapsiblecontent'-» 


«/button» 
«hl class-"display-3"»Your blog«/h1» 
«/div» 
«/div» 
«/header» 


最 后 ， 添 加 以 下 SCSS 代码 ， 将 按钮 颜色 设置 为 白色 : 


.navbar-toggler { 
color: Slight-color; 


} 


除了 第 一 个 导航 链接 以 外 ， 其 余 的 导航 链接 均 拥 有 margin-left 属性 值 ， 其 结果 如 下 图 
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对 于 大 屏幕 来 说 ， 这 一 左 外 边 距 很 有 用 ,但 对 于 小 屏幕 来 说 ， 就 有 必要 去 除 这 一 设 定 了 。 可 
以 使 用 第 1 章 介绍 过 的 Bootstrap 媒体 查询 范围 来 解决 这 一 问题 。 编 辑 scss/includes/ navbar.scss 
文件 中 的 SCSS 代码 ， 移 除外 边 距 : 
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.navbar ( 
Ginclude media-breakpoint-down(sm) ( 
.nav-item + .nav-item ( 
margin-left: 0; 
} 
} 
} 


做 完 这 些 修 改 后 ,就 可 以 重新 调整 浏览 器 视 口 大 小 进行 测试 。 将 窗口 宽度 调整 至 大 于 768 f 
素 ， 则 导航 条 会 以 水 平 排列 的 方式 显示 。 


一 步 ， 添 加 以 下 SCSS 代码 ， 让 导航 链接 的 高 度 占 满 整 个 导航 条 


.navbar ( 
padding-top: 0; 
padding-bottom: 0; 

} 


接着 ,在 当前 选择 的 导航 条 链接 下 方 添加 一 个 用 CSS 写 的 小 三 角 。Bootstrap 本 身 并 不 提供 
CSS 三 角形 方面 的 混入 ， 但 我 们 完全 可 以 在 网 络 上 找到 相关 的 Sass 混入 。 在 本 例 中 ， 我 们 会 使 
以 下 链接 中 所 提供 的 三 角形 混和 人 工具: https://css-tricks.com/snippets/sass/css-triangle-mixin/。 该 

具 依 赖 由 Hugo Giraudel 开发 的 opposite-direction() 混 入 。 你 可 以 在 scss/includes/ 
"c | triangle.scss 文件 中 找到 这 两 个 混入 。 


TE, 我 们 再 一 次 复 用 了 由 他 人 所 编写 和 测试 的 混入 工具 。 fer Boe TEL, 向 当前 选择 的 导 
航 条 链接 上 添加 小 三 角 就 变 得 非常 简单 ， 只 要 像 以 下 SCSS 代码 中 所 展示 的 那样 进行 简单 的 编辑 
就 可 以 了 : 


.nav-link { 
position: relative; 
@include media-breakpoint-up(md) ( 
&.active ( 
&::before { 
Ginclude triangle (bottom,$accent-color); 
position: absolute; 
margin-left: -lem; 
left: 50$; 
top: 100$; 
} 
} 
} 
} 


请 注意 ,在 nav-1link 类 中 需要 定义 position: relative 规则 。 而 由 于 我 们 只 需要 在 大 
型 浏览 器 视 口 中 添加 三 角形 效果 ， 因 此 上 述 代码 是 封装 在 @include media-breakpoint- 
up (md) {} 这 一 混入 操作 中 的 。 


最 后 ， 导 航 条 会 如 下 图 所 示 。 
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至 此 ， 导 航 条 看 起 来 已 经 很 不 错 了 , 但 为 了 让 效果 更 上 一 层 楼 , 我们 将 把 照片 放置 在 导航 条 
正中 。 


首先 ， 在 html/includes/navbar.html 模板 中 添加 必需 的 HTML 代码 : 


«li class-"nav-item"- 

«a class-"nav-link" href="#">Features</a> 
«/li» 
«li class-"nav-item"- 

«img class-"your-photo img-circle" src-"((root))images/you.png" alt-"Your photo" 
height-"140" width-"140"-» 

«dox 
«li class-"nav-item"- 

«a class-"nav-link" href-"i$"»Pricing«/a» 

«/li» 





将 照片 复制 到 项 目 中 的 assets/images 目录 里 ， 确 保 每 次 重新 构建 项 目 后 该 文件 会 被 复制 到 
site 临时 目录 中 。 


而 接 下 来 唯一 需要 做 的 事情 就 是 编写 照片 所 需 的 SCSS 代码 了 。 我 们 将 把 照片 元 素 的 display 
属性 值 默认 设置 为 none， 从 而 确保 在 小 视 口中 隐藏 该 照片 ， 然 后 再 一 次 使 用 Bootstrap 中 的 媒体 
查询 范围 混入 ， 在 大 视 口 中 把 它 显 示 出 来 : 


.navbar { 
.your-photo { 
display: none; 
@include media-breakpoint-up(md) { 
display: block; 
position: absolute; 
top: -100$; 
j 
} 
} 


Bootstrap 中 的 img-circle 类 可 以 让 照片 以 圆 形 的 方式 显示 。 导 航 条 完工 后 ， 会 如 下 图 
所 示 。 
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4x: 


在 接 下 来 的 小 节 中 ， 我 们 将 调整 博客 页 面 主体 部 分 及 侧 边栏 的 样式 。 
不 使 用 Bootstrap 预定 义 CSS 类 的 导航 条 


使 用 Bootstrap 中 预定 义 的 CSS 类 ， 可 以 轻松 地 在 项 目 中 添加 导航 条 。 这 种 做 法 下 ， 每 个 项 EE 
目 中 的 HTML 标记 结构 都 是 一 样 的 ,开发 者 只 需 在 HTML 中 使 用 CSS 类 即 可 调整 导航 条 的 样式 。 


而 与 此 同时 ， 也 可 以 在 HTML 中 移 除 这 些 CSS 类 ， 只 使 用 Sass 来 调整 导航 条 的 样式 。 
除了 使 用 navbar、navbar-dqark 这 些 类 ， 也 可 以 使 用 以 下 SCSS 代码 : 


nav[role-"navigation"] ( 
Gextend .navbar; 
Gextend .navbar-dark; 
Ginclude nav-justified; 
padding-top: 0; 
padding-bottom: 0; 

} 


此 时 ,照片 元 素 不 再 需要 使 用 your-photo 和 img-circle 类 了 。 取而代之 的 是 , 在 SCSS 
中 扩展 img-circle 类 : 


nav[role-"navigation"] ( 
li » img ( 
display: none; 
Gextend .img-circle; 
Ginclude media-breakpoint-up(md) ( 
display: block; 
position: absolute; 
top: -100$; 
z-index: 1; 
} 
} 
} 









































请 注意 ， 在 SCSS 代码 中 ， 对 img-circle 类 的 扩展 发 生 在 媒体 查询 范围 以 外 。 
这 是 因为 Sass 不 允许 在 @media 规则 内 扩展 外 部 选择 符 。 另 外 ,代码 中 还 设置 了 
z-index， 用 于 确保 照片 元 素 不 被 任何 其 他 内 容 所 遮挡 。 


在 SCSS 代码 中 ， 可 以 进行 很 多 的 调整 ， 比 如 将 每 个 nav-item 选择 符 替 换 为 nav [role= 
"navigation"] > ul > li, 同时 调整 每 个 nav-link 选择 符 的 代码 ， 等 等 。 而 在 此 过 程 中 
需要 注意 的 是 : justify-nav 混入 中 的 nav-item 和 nav-1ink 选择 符 也 应 当做 相应 的 替换 。 
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3.8 博客 页 面 主体 部 分 


在 小 尺寸 视 口 中 , 侧 边 栏 会 放置 于 主 内 容 的 下 方 ,而 在 大 尺寸 的 视 口 中 ， 则 会 浮动 于 主 内 容 
的 右 侧 。 








在 大 尺寸 屏 视 口中 , 主 内 容 会 占据 3/4 的 空间 ,而 剩余 的 1/4 空间 则 留 给 侧 边栏 ,可 以 在 HTML 
中 通过 co1-mà-9 和 co1-ma-3 类 来 实现 这 一 效果 。 
































这 种 分 栏 布局 是 在 html/layouts/default.html 文件 中 的 布局 模板 中 设置 的 : 





<div class="main-content container"> 
<div class="row"> 
«main class-"col-md-9" role="content"> 
{{> body}} 
</main> 
<aside class="col-md-3"> 
{{> sidebar}} 
</aside> 
</div> 
</div> 





























与 之 前 的 例子 一 样 , 也 可 以 不 使 用 col-md-* 类 , 转 而 通过 编辑 scss/includes/ blog.scss 文件 
中 的 以 下 SCSS 代码 来 达到 相同 的 目的 。 


main[role-"content"] ( 

Ginclude make-col(); 

Ginclude media-breakpoint-up(md) ( 
Ginclude make-col-span(9); 

j 

+ aside ( 
Ginclude make-col(); 
Ginclude media-breakpoint-up(md) ( 

Ginclude make-col-span(3); 

j 


} 


甚至 移 除 HTML 中 的 container 和 row 类: 


.main-content { 
@include make-container(); 
@include make-container-max-widths(); 


> div ( 
Ginclude make-row(); 
main[role-"content"] ( 


Ginclude make-col(); 

Ginclude media-breakpoint-up(md) ( 
Ginclude make-col-span(9); 

j 

+ aside ( 
Ginclude make-col(); 
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Ginclude media-breakpoint-up(md) ( 
Ginclude make-col-span(3); 











当 在 网 格 系统 中 使 用 Sass 混 人 时 , 可 以 通过 调整 Senable-grid-classes 变量 的 值 来 禁 
预定 义 的 网 格 类 。 这 么 做 可 以 使 编译 后 的 CSS 代码 更 小 、 加 载 更 快 。 








Bootstrap 的 源 代码 中 还 包含 了 一 个 名 为 bootstrap-grid.scss 的 特殊 的 Sass 局 部 文 


é5 件 。 可 以 在 引入 时 用 此 局 部 文件 代替 bootstrap.sess 文件 ,从 而 编译 生成 网 格 系统 = 
的 CSS 代码。 
借助 上 述 的 代码 方案 ， 可 以 在 项 目 中 只 使 用 Bootstrap 的 网 格 系统 ， 而 不 涉及 任何 别 的 组 件 。 
不 过 ,Bootstrap 中 的 网 格 系统 需 要 将 box-sizing WEN border-box, MIXTE bootstrap-grid.scss 
文件 中 是 没有 定义 的 ， 需 要 开发 者 自行 添加 。 
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本 章 的 博客 站 点 中 包含 了 一 系列 文章 , 其 中 每 一 篇 都 以 一 张 相关 的 图 片 开 头 。 本 节 示 例会 介 
绍 一 篇 博客 文章 的 页 面 。 完 成 后 ， 该 页 面 会 如 下 图 所 示 。 

















Blog post 1 


16:00:00 01/01/2018 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla 
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum 
felis eu pede mollis pretium. 


Read more 




















保存 在 html/pages/index.html 文件 中 的 博客 文章 的 HTML 代码 如 下 : 


«article» 
«img src-"((root)jimages/blogl.png" class-"img-fluid"» 
«div class-"blog-post"» 
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«header»«h1»Blog post 1</h1><time>16:00:00 01/01/2018«/time»«/header- 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean 
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis 
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, 
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet 
a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.«/p» 


<p><a href-""sRead more ...«/a» 
«footer»«/footer» 
«/div» 
«/article» 


其 中 , 图 片 元 素 拥 有 img-fluia 28, 用 于 实现 响应 式 设计 。 完成 后 , 博客 文章 会 如 下 图 所 示 。 


Your blog 


Home 





Blog post 1 


16:00:00 01/01/2018 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum 
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, 
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis 
pretium. 





Read more 























编辑 scss/includes/ blog.scss 文件 中 的 SCSS 局 部 文件 。 首 先 ， 设 置 标题 标签 的 颜色 : 


.main-content ( 
hi$; -h2;h3 f 
color: $primary-color; 




















除 此 之 外 ， 也 可 以 在 scss/includes/ variables.scss 文件 中 通过 将 Sheading-color 变量 设置 


为 Sprimary-color 来 实现 相同 的 效果 。 当 这 么 做 时 ， 需 要 在 scss/includes/ page-header.scss 页 
眉 文件 中 显 式 声明 <h1> 元 素 的 颜色 : 


.bg-primary-color-dark { 
background-color: $primary-color-dark; 
color: $light-color; 
hi ( 

color: $page-header-heading-color; 
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同时 , 还 需要 在 scss/includes/ variables.scss 文件 中 将 Spage-header-heading-color 的 值 
设置 为 Slight-color !default;o 


接 下 来 ， 为 每 篇 文章 设置 上 边 距 : 


main ( 
article ( 
padding-top: $spacer-y; 
} 
} 


除了 这 种 写法 外 ,也 可 以 在 HTML 代码 中 使 用 p-t-1 类 这 一 Bootstrap 4 中 新 引入 的 工具 类 。 E73 





开发 者 可 以 使 用 这 些 类 来 设置 元 素 的 内 外 边 距 。 可 以 阅读 2.11.2 节 中 的 “调整 导航 条 及 首 屏 的 样 
式 ”， 了 解 有 关 该 工具 类 的 更 多 内 容 。 


最 后 ， 来 调整 一 下 博客 文章 自身 的 样式 。 先 在 scss/includes/_blog.scss 文件 中 编辑 以 下 SCSS 
代码 ， 设 置 博客 文章 的 背景 色 和 边框 : 


.blog-post ( 
padding: $spacer-y $spacer-x; 
margin-top: $spacer-y; 
background-color: $light-color; 
border: 1px solid $gray; 





) 
同样 ， 可 以 通过 在 HTML 代码 中 添加 m-c-1 fll p-a-1 等 CSS 类 来 设置 内 外 边 距 。 
在 浏览 器 中 查看 ， 最 终 的 结果 将 如 下 图 所 示 。 





























Blog post 1 


16:00:00 01/01/2018 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla 
vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam 
dictum felis eu pede mollis pretium. 


Read more 























最 后 ,为 了 美观 ， 添 加 指向 博客 项 部 图 片 的 CSS 小 三 角 。 
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由 于 该 小 三 角 需 要 边框 , 因此 我 们 会 用 两 个 三 角形 来 实现 。 其 中 第 二 个 稍 小 的 三 角形 会 肢 在 
第 一 个 三 角形 上 , 使 得 第 一 个 拥有 黑色 背景 的 三 角形 呈现 出 边框 的 效果 。 相关 的 SCSS 代码 如 下 : 

















.blog-post { 
position: relative; 
&::before { 
@include triangle(top,$gray,1.1em); 
position: absolute; 
left: 29px; 
bottom: 100%; 


&::after ( 
Ginclude triangle(top,$1light-color); 
position: absolute; 
left: 30px; 
bottom: 100$; 








三 角形 效果 如 下 图 所 示 。 
至 此 就 完成 了 对 博客 文章 的 样式 调整 。 接 下 来 开始 调整 页 面 侧 边栏 的 样式 。 


3.10 ”调整 侧 边 栏 的 样式 
博客 页 面 的 侧 边栏 是 由 Bootstrap 中 的 列表 组 所 开发 的 ， 其 效果 如 下 图 所 示 。 











Archive 
Cras justo odio 
Dapibus ac facilisis in 
Morbi leo risus 
Porta ac consectetur ac 


Vestibulum at eros 




















可 以 借助 Bootstrap 及 其 预定 义 的 1ist-group fH list-group-item 类 ,轻松 地 将 <ul> 列 
表 转 变 为 列表 组 ， 而 这 一 过 程 也 在 实践 层面 展示 了 Bootstrap 中 CSS 类 的 灵活 性 和 可 复 用 性 。 我 
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们 可 以 将 <ul> 元 素 简 单 地 替换 成 <aiv> 元 素 以 及 一 系列 <a> 标 签 。htmlyincludes/sidebarhtml 文件 
中 侧 边栏 菜单 的 HTML 代码 如 下 : 


«aside» 
<h2>Archive</h2> 
«1-- list ==> 


«div class-"list-group"» 
«a href="#" class-"list-group-item"»Cras justo odio</a> 
«a href-"4" class-"list-group-item"»Dapibus ac facilisis in</a> 
«a href="#" class-"list-group-item"»Morbi leo risus«/a» 
«a href="#" class-"list-group-item"»Porta ac consectetur ac«/a» 
«a href="#" class-"list-group-item"»Vestibulum at eros«/a» 





«/div» 
«/aside» 
在 scss/includes/ sidebar.scss 文件 中 按 以 下 方式 编写 SCSS 代码 ， 设 置 侧 边栏 的 基本 样式 : 
aside ( 


margin-top: $spacer-y; 
padding: $spacer-y $spacer-x ($spacer-y / 3) $spacer-x; 
background-color: $light-color; 
border: 1px solid $gray-dark; 
} 


最 后 , 在 scss/includes/_variables.scss 文件 中 用 以 下 SCSS 代码 覆 写 Bootstrap 的 变量 , 设置 鼠 
标 悬 浮 到 列表 上 时 的 色调 : 


$list-group-hover-bg: $accent-color; 
S$list-group-link-hover-color: $light-color; 


至 此 ， 博 客 页 面 几 近 完成 了 。 接 下 来 唯一 需要 做 的 就 是 编写 页 面 的 页 脚 了 。 




















3.11 RÆ 


页 脚 应 如 下 图 所 示 。 

在 大 尺寸 视 口 中 ,页 脚 由 两 个 同等 宽度 的 栏 所 组 成 。 而 在 视 口 宽度 小 于 768 像素 时 ,这 两 栏 
就 会 上 下 堆 半 在 一 起 。 

html/includes/footer.html 这 一 HTML 模板 中 应 当 包 含 以 下 HTML 代码 : 

«footer class-"container page-footer bg-dark"'» 


«div class="row"> 
«div class-"col-md-6"-» 





«1-- left --» 
«/div» 
«div class-"col-md-6"-» 
«1-- right --» 
</div> 
</div> 


</footer> 
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页 脚 会 被 col-md-6 类 分 成 同样 大 小 的 两 栏 。 在 中 型 和 大 型 网 格 中 ， 每 栏 各 占据 50% 的 空 
间 ， 也 就 是 12 个 网 格 单元 中 的 6 个 。 如 之 前 所 提 到 的 ， 你 也 可 以 选择 使 用 Bootstrap 中 的 Sass 
混入 来 搭建 自己 的 网 格 系统 。 


背景 色 和 字体 颜色 是 用 bg-daark 类 来 设置 的 。 而 该 类 的 编译 则 源 自 scss/includes/ footer.scss 
文件 中 的 以 下 SCSS 代码 : 


.bg-dark ( 
color: $light-color; 
background-color: $dark-color; 


} 


除 此 之 外 ， 也 可 以 用 以 下 混入 操作 来 生成 bg-dark 类 : 


Ginclude bg-variant('.bg-dark', $dark-color); 


为 方便 之 后 创建 社交 媒体 按钮 ， 还 需要 定义 bg-accent-color 类 。 而 为 了 提升 bg-* 这 些 
类 的 复 用 性 ， 可 以 考虑 将 其 抽 提 成 新 的 Sass 局 部 文件 。 在 scss/includes/ backgrounds.scss 中 包含 
以 下 SCSS 代码 : 


Ginclude bg-variant 
Ginclude bg-variant 


Ginclude bg-variant 
Ginclude bg-variant 


在 设置 好 背景 色 和 字体 颜色 后 , 就 可 以 调整 页 脚 自身 的 样式 了 , 并 在 页 脚 中 添加 向 上 的 CSS 
小 三 角 。 可 以 编辑 scss/includes/_footer.scss 文件 中 的 以 下 SCSS 代码 ， 设 置 页 脚 的 主体 样式 : 











'.bg-primary-color-dark', $primary-color-dark); 
'.bg-primary-color', $primary-color); 
'.bg-accent-color', $accent-color); 


( 
( 
( 
('.bg-dark', $dark-color); 











.page-footer { 
position: relative; 
padding: $spacer; 
margin-top: $spacer-y; 
&::after ( 
Ginclude triangle(top,$dark-color); 
position: absolute; 
bottom: 100$; 
left: 10$; 
j 
j 


当然 ， 如 之 前 所 提 到 的 ， 也 可 以 通过 Bootstrap 中 的 m-t-1 M p-x-1 类 来 设置 内 外 边 距 。 


3.11.1 ”页 脚 中 的 左 侧 栏 
页 脚 中 左 侧 一 栏 会 包含 一 小 段 文 字 ， 以 及 一 行 社交 媒体 按钮 : 


<p class="page-foooter-text">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus.«/p» 











«div class-"social-buttons"-» 
«ul» 
«li»FB«/li» 
«li»TW«/li» 
«li»G««/li» 
«/ul» 
</div> 





页 脚 中 的 文字 不 需要 添加 任何 额外 的 样式 。 可 以 用 sess/includes/ footer.sess 文件 中 的 SCSS 
代码 修改 社交 媒体 按钮 的 样式 : 


.social-buttons { 
ul ( 
padding: 0; ER TUI 
margin: 0; 
list-style: none; 
li ( 
padding: 10px; 
border: 1px solid $accent-color-light; 
} 
} 
.page-footer & ( 
En 
float: left; 
Gextend .bg-accent-color; 
) 
) 
Ginclude clearfix(); 


} 


请 注意 ， 在 之 前 的 代码 中 使 用 了 & 这 一 父 级 引用 符 : 


.page-footer & ( 
li 
Gextend .bg-accent-color; 
float: left; 
} 
} 








此 处 ，g 父 级 引用 符 被 用 于 逆转 选择 符 的 顺序 。 之 前 的 SCSS 代码 会 被 编译 为 : 


.page-footer .social-buttons li ( 
float: left; 
} 




















该 结果 意味 着 float : left 规则 仪 当 .social-buttons li 选择 符 是 .page-footer T 
元 素 时 才 生 效 。 而 在 我 们 的 项 目 中 , 社交 媒体 按钮 仅 在 .page-footer AWT ŒM float: left 
的 效果 。 在 之 后 搭建 社交 媒体 按钮 的 固定 列表 时 ， 我 们 会 使 用 该 方法 来 复 用 这 些 按钮 的 SCSS 
代码 。 








由 于 之 前 的 代码 中 列表 元 素 使 用 了 浮动 ， 因 此 我 们 无 法 直接 设置 <ul> 标 签 的 背景 色 。 该 问 
题 可 以 通过 @extend .bg-accent-color; 声 明 来 解决 。 


^x > 
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3.11.2 ”页 脚 中 的 右 侧 栏 


页 脚 中 右 侧 一 栏 包含 了 用 于 订阅 简报 的 表单 。 该 表单 是 由 Bootstrap 中 的 输入 框 组 组 件 所 开 
发 的 。 表 单 的 HTML 代码 如 下 : 


<h3>Join our Newsletter</h3> 
<div class="input-group"> 
«input type="text" class-"form-control" placeholder-"Your e-mail"> 
«span class-"input-group-btn"» 
«button class="btn btn-accent-color" type-"button"»Subscribe«/button» 
</span> 
</div> 


可 以 用 以 下 SCSS 代码 来 编译 btn-accent-color 类 : 


.btn-accent-color { 
@include button-variant (#fff, $accent-color, #fff); 


} 





上 述 定义 btn-accent-color 类 的 代码 保存 在 scss/includes/_footer.scss 文件 中 。 将 按钮 样 
式 单独 保存 在 _buttons.scss 局 部 文件 中 可 以 让 代码 更 易 复 用 。 





当然 ， 也 完全 可 以 不 创建 btn-accent-color 这 样 的 类 。 使 用 以 下 SCSS 代码 也 可 以 达到 
同样 的 效果 : 


.bage-footer { 
button { 
Gextend .btn; 
@include button-variant (#fff, $accent-color, #fff); 
} 








最 后 ,用 以 下 SCSS 代码 给 <h3> 元 素 配 以 合适 的 颜色 : 


.bage-foter { 
h3 { 
color: $accent-color; 
j 
} 





3.12 ” 复 用 社交 媒体 按钮 的 SCSS 代码 


为 了 进一步 改进 效果 ,我们 将 在 页 面 左 侧 添 加 固定 浮动 的 社交 媒体 按钮 ， 其 效果 如 下 
所 示 。 
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首先 ， 在 html/includes/footer.html 文件 的 末尾 添加 以 下 HTML 片段 : 


«div class="social-buttons fixed-media bg-accent-color"> 
<ul> 
«li»FB«/li» 
«li»TW«/li» 
«li»G««/li» 





«/ul» 
«/div» 


请 注意 ， 在 外 部 的 <aiv> 元 素 中 存在 bg-accent-color 这 一 CSS 25, 


然后 ， 在 scss/includes/ footer.scss 中 按 以 下 方式 编辑 SCSS 代码 即 可 : 


.Social-buttons { 
&.fixed-media { 
display: none; 
Ginclude media-breakpoint-up(md) ( 
position: fixed; 
top: 150px; 
display: block; 
} 
} 
} 


正如 这 一 例子 所 展示 的 , 借助 Sass 可 以 最 大 程度 地 复 用 曾经 编写 过 的 SCSS 代码 , 在 页 脚 中 
调整 社交 媒体 按钮 的 样式 。 除 此 之 外 ， 还 可 以 考虑 将 这 些 社交 媒体 按钮 的 代码 保存 成 单独 的 
HTML 模板 和 Sass 局 部 文件 ， 进 一 步 提升 其 可 复 用 性 。 


在 写作 本 书 时 , 除了 Opera Mini 浏览 器 外 ,所 有 的 现代 浏览 器 都 支持 position:fixed; 语 
法 ， 并 会 将 相关 元 素 显示 在 页 面 固定 的 位 置 ， 不 管 滚动 位 置 如 何 。 


























(p 可 以 访问 http://[caniuse.com/Zfeat-css-fixed, ^53] € £48 X X. 


3.13 ”本 章 源 代码 


可 以 访问 Packt 出 版 社 网 站 中 的 下 载 板 块 (http:/www.packtpub.com/support ), 下 载 本 章 源 代 
人 码 。 然 后 运行 以 下 命令 ， 启 动 项 目 。 
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bower install 
npm install 
bootstrap watch 


对 于 那些 尚未 安装 Bootstrap 


bootstrap watcho 


CLI 的 读者 来 说 ， 可 以 用 gulp 或 npm start 命令 来 代替 





也 可 以 通过 以 下 GitHub 网 址 来 下 载 源 代码 : https://github.com/bassjobsen/bootstrap- 


Weblog。 


使 用 CLI， 运 行 GitHub 中 的 代码 


运行 以 下 命令 ， 安 装 Bootstrap CLI: 


[sudo] npm install -g gulp bower 


npm install bootstrap-cli 














--global 


然后 使 用 以 下 命令 新 建 由 Bootstrap 4 制作 的 博客 项 目 : 


bootstrap new --repo https://github.com/bassjobsen/bootstrap-weblog.git 














3.14 小结 


本 章 详细 介绍 了 Sass, LERH 








E 解 了 如 何 用 Sass 来 定制 Bootstrap 组 件 。 我们 搭建 了 博客 页 面 ， 


并 借 由 Sass 以 多 种 策略 调整 了 页 面 样式 。 而 在 接 下 来 的 章节 里 ， 你 可 以 尝试 实践 新 学 的 Sass Al 
识 ， 用 Bootstrap 和 Sass 搭建 惊艳 的 Web 站 点 。 








下 一 章 ， 我 们 将 用 Bootstrap 4 创建 WordPress 主题 。 


第 4 章 
WordPress 主题 


























WordPress 是 一 个 非常 流行 的 内 容 管理 系统 ( CMS )。 现 如 今 ， 全 球 25% 的 网 站 都 是 由 这 一 
免费 开源 的 PHP 系统 所 搭建 的 。 你 可 以 访问 Packt 出 版 社 网 站 的 WordPress 页 面 ， 学 习 更 多 有 关 
WordPress 的 内 容 : https://www.packtpub.com/tech/wordpress。 











本 章 要 把 第 3 章 的 设计 变 成 一 个 WordPress 主题 。 基于 Bootstrap 的 主题 其 实 很 多 。 而 我 们 要 
把 Bootstrap 强大 的 Sass 样式 和 JavaScript 搬 件 ， 以 及 HTMLS Boilerplate 中 的 最 佳 实践 结合 在 一 
起 。 因 此 选择 一 款 符合 上 述 要 求 的 主题 对 我 们 是 有 利 的 。 我 们 将 使 用 JBST4 这 一 基于 Bootstrap 4 
的 空白 WordPress 主题 。 


作为 快速 上 手 型 的 主题 ，JBST 4 是 理想 的 选择 ， 它 从 一 开始 就 将 自己 定位 为 Bootstrap 驱动 
的 、 各 方面 都 遵循 最 佳 实践 执行 的 一 个 主题 。 


本 章 内 容 有 : 


口 安装 WordPress 和 JBST 4 主题 ; 

O 在 JBST 主题 中 整合 定制 的 Sass 和 JavaScript 文件 ; 

O 定制 主题 模板 文件 ， 使 其 标记 结构 符合 我 们 的 要 求 ; 

口 配置 网 格 系统 和 导航 条 ; 

口 搭建 页 眉 和 页 脚 ; 

口 定制 侧 边栏 并 使 用 请 和 人 式 荣 单 模板 ; 

口 调整 按钮 和 评论 的 样式 ; 

O 使 用 Font Awesome 字体 图 标 库 创建 社交 媒体 链接 ; 

口 使 用 Bootstrap 中 的 Carousel 组 件 制 作 图 片 传送 带 效果 ; 
口 制作 砌 体 网 格 效果 。 






































4.1 安装 WordPress 及 相关 依赖 
为 了 运行 WordPress， 你 需要 启动 本 地 Web 服务 器 ， 并 在 其 中 使 用 PHP 和 MySQL。 
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AMPPS 是 一 个 易于 安装 的 软件 套件 ， 其 中 包含 了 Apache, MySQL, PHP, Perl, Python 和 
Softaculous， 适 用 于 桌面 设备 和 内 网 服务 器 环境 。 作 为 免费 软件 ，AMPPS 可 以 运行 于 Linux, 
Mac OS X 和 Windows 等 多 种 环境 。 可 以 访问 http:/ampps.com/downloads， 下 载 AMPPS。 


可 以 访问 http://ampps.com/apps/blogs/WordPress， 下 载 适用 于 WordPress 的 AMPPS 版 本 。 


Windows 用 户 也 可 以 使 用 WampServer 这 一 Windows 下 的 Web 开发 环境 。 可 以 用 它 来 创建 
使 用 Apache2 PHP 和 MySQL 数据 库 的 Web 应 用 程序 。 而 搭配 使 用 PhpMyAdmin 后 , 在 
WampServer 中 可 以 轻松 地 管理 数据 库 。 可 以 访问 http:/www.wampserver.com/en/， 了 解 更 多 有 关 
WampServer 的 信息 。 























4.1.1 安装 WordPress 


在 安装 好 Web 服务 器 后 , 就 可 以 安装 WordPress T o 这 一 过 程 非常 简单 , 平均 耗 时 仅 5 分 钟 。 
如 果 对 类 似 的 安装 过 程 比较 熟悉 的 话 ， 不 妨 试 试 WordPress 中 著名 的 “5 分 钟 安装 ”。 可 以 访问 
https://codex.wordpress.org/Installing WordPress， 了 解 详 细 的 安装 步骤 。 

















4.1.2 Node.js, Gulp 和 Bower 





























WordPress 主题 JBST4 是 由 Gulp 构建 的 , 其 前 端 类 库 和 相关 依赖 由 Bower HE. 3517 Gulp 
前 ， 需 先 在 操作 系统 中 安装 Node.js 这 一 基于 Chrome V8 引擎 的 JavaScript 运行 时 环境 。 可 以 访 
间 https:/nodejs.org/en/， 了 解 更 多 安装 Node.js 的 相关 信息 。 


安装 Node.js 后 ， 其 包 管理 器 npm 也 会 被 自动 安装 到 系统 中 。 之 后 ， 可 以 运行 以 下 命令 , X 
装 Gulp 和 Bower: 




















npm install --global gulp-cli 
npm install --global bower 








可 以 访问 http://bower.io/, 阅读 更 多 有 关 Bower 的 介绍 ,第 2 章 详细 介绍 了 Gup 及 构建 流程 。 


4.2 安装 JBST 4 主题 
首先 ， 我们 来 下 载 JBST 4 主题 。 进 入 WordPress 中 的 wordpress/wp-content/themes/ 目 录 ， 运 
行 以 下 命令 : 
git clone https://github.com/bassjobsen/jbst-4-sass.git jbst-weblog-theme 
然后 进入 刚 创 建 的 jbst-weblog-theme 目录 ， 运 行 以 下 命令 并 确认 一 切 正常 : 


npm install 
gulp 











如 果 一 切 正常 ， 则 可 执行 以 下 步骤 来 创建 定制 主题 。 


(1) 找到 jbst-weblog-theme 文件 夹 中 的 style.css 文件 ， 然 后 在 自己 偏好 的 编辑 器 中 打开 它 。 
打开 这 个 文件 后 ， 你 会 发 现 里 面 其 实 只 有 WordPress 所 需 的 基础 样式 。 站 点 的 样式 来 自 assets XC 
件 夹 中 的 css 目录 ,是 由 Bootstrap 编译 生成 的 。 我 们 继续 沿用 Bootstrap 的 这 种 模式 。 而 style.css 
在 这 里 主要 用 于 命名 主题 、 列 出 贡献 者 名 单 、 声 明 许 可 ， 等 等 。 


(2) 按照 下 面 的 样板 修改 主题 名 称 : 


/* 

JBST Weblog Theme, Copyright 2016 Bass Jobsen 

JBST Weblog Theme is distributed under the terms of the GPLv2 
Theme Name: JBST Weblog Theme 

Theme URI: https://github.com/bassjobsen/jbst-weblog-theme 
Description: A custom Weblog theme based on the JBST 4 Theme 
(https://github.com/bassjobsen/jbst4-sass). 

Author: Bass Jobsen 

Author URI: http://bassjobsen.weblogs.fm/ 

Version: 1.0.0 

License: GNU General Public License & MIT 

License URI: license.txt 

Tags: one-column,two-columns,three-columns,left-sidebar, 
right-sidebar,responsive-layout 

Text Domain: jbst-4 

*/ 


Q) 保存 这 个 文件 。 


(4) 接 下 来 替换 screenshot.png 文件 ， 添 加 自 定义 的 屏幕 截图 ， 以 便 在 WordPress 的 控制 板 中 
更 容易 找到 它 。 


(5) 截取 第 3 章 的 一 张 反映 主题 设计 的 截图 ( PNG 格式 ), 建议 的 图 片 尺寸 为 1200 像素 x 9000 
像素 。 


(6) 把 JBST 默 认 的 屏幕 截图 替换 成 自 定 义 的 屏幕 截图 。 


现在 可 以 安装 JBST 主题 了 。 
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前 面 的 修改 暂时 切断 了 与 Bootstrap FÉxX , JavaScript 等 的 联系 。 接 下 来 几 步 要 恢复 这 些 联系 。 
为 了 让 整个 过 程 更 有 趣 ， 我 们 可 以 先 安装 并 运行 主题 ， 这 样 就 可 以 随时 测试 了 。 

在 WordPress 的 仪表 盘 页 面 中 , 访问 Appearance | Themes 子 页 面 ,激活 主题 。 如 果 已 经 重 


命名 了 主题 并 提供 了 新 的 预览 截图 ( 抑或 使 用 的 是 原 主题 的 默认 文件 )， 就 可 以 看 到 下 图 所 显示 
的 结果 。 
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JBST Weblog Then| Actvals | tvePreview | 











(1) 点 击 Active 按钮 。 激 活 后 会 出 现 一 个 新 的 Customize 按钮 。 
(2) 点 击 该 Customize 按钮 。 
(3) 跳 转 到 一 个 新 的 页 面 ， 从 中 可 以 快速 设置 以 下 基本 选项 。 


a Site Identity: 更 新 标语 。 

m Colors: 不 设置 。 

m Background Image: 不 设置 。 

m Menus: 在 下 一 节 中 ， 我 们 将 在 此 处 添加 一 个 新 的 菜单 。 
m Widgets: 已 设置 侧 边栏 。 

m Static Front page: 使 用 最 新 的 博客 文章 。 


(4) 在 页 面 右 侧 方 框 内 ， 可 以 看 到 默认 的 Bootstrap 导航 条 、 侧 边栏 和 安装 后 自 带 的 第 一 篇 
Hello World 文章 。 




















x ES WordPress Weblog Theme Home Search Search 


You are customizing e Hello world! 


WordPress Weblog Theme 


Search 


Posted on May 9, 2016 by admin - Uncategorized Recent Posts 


Hell id! 
Welcome to WordPress. This is your first post. Edit or delete it, PERNT 


Change then start writing! Recent Comments 
* Mr WordPress on Hello 


Active theme 
JBST Weblog Theme 


Site Identity > world! 
Colors > Archives 
* May 2016 
Background Image > 
Categories 
Menus > 
e Uncategorized 
Widgets > 
Meta 
Static Front Page > e Site Admin 
* Log out 
O colapse oeng * Entries RSS 








* Comments RSS 
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祝贺 你 ! JBST 主题 已 经 安装 成 功 了 。 
如 果 导 航 条 或 页 面 文本 并 未 使 用 Bootstrap 的 默认 样式 的 话 ， 那 多 半 是 因为 尚未 
运行 gulp 命令 ， 不 妨 检查 重 试 一 下 。 同 时 请 注意 ， 在 运行 gulp 前 ， 需 要 先 运 
行 npm install 和 bower install 命令 。 


接 下 来 ， 开 始 设置 页 面 组 件 。 


44 复 用 Sass 代码 


第 3 章 编 写 过 博客 主题 的 Sass 代码 。 为 了 复 用 这 些 代 码 ， 可 以 将 第 3 章 中 scss/includes 目录 
里 的 Sass 文件 和 目录 复制 到 jbst-weblog-theme 目录 里 的 assets/scss/includes 目录 中 。 复制 过 程 中 ， 
可 以 将 _navbar.scss 局 部 文件 覆盖 掉 ， 同 时 移 除 bootstrap.sess 局 部 文件 。 完 成 后 ， 可 以 得 到 一 个 
文件 和 如 下 图 所 示 的 目录 结构 。 




















includes 
_blog.scss 
_footer.scss 
mixins 
X  nav-justified.scss 
 triangle.scss 
mixins.scss 
navbar.scss 
page-header.scss 
sidebar.scss 
 variables.scss 
login.scss 
 main.scss 
style.scss 
 variables.scss 














接着 ， 编 辑 assets/scss/styles.scss 文件 。 先 引入 includes/variables.scss， 然 后 再 引入 定制 的 变 
EF, 最终 在 //Import Customizations comment 注释 后 引入 其 他 SCSS 局 部 文件 。 更 改 
完成 后 ，assets/scss/styles.scss 文件 中 的 SCSS 代码 如 下 : 


J ERROR AE AE HE HE RE KE KE KE KE EEKE KE KE EEE E SEAE AE AE AE AE AE AE AE KE KE KE KEKEKE E KE KE EEEE EEE AKKKOR K K K K 
样式 表单 : 主 样式 表单 

将 所 有 Sass 文件 导入 到 这 里 ， 它 们 会 编译 成 CSS 文件 

J EORIORORORROORRIOIOEOIORROEOROROIOROEOIOROIOROOIOROOIORIOIORDIOROOROROIOODIORGOOROROIOROOIORGROIOEOIOIOROOIOR 
样式 表单 : 主 样式 表单 

将 所 有 Sass 文件 导入 到 这 里 ， 它 们 会 编译 成 CSS 文件 


ECkckck ck ck ckck ck ck ckckokokckckckckck ck ck ck ck ck ck ck ck okokokokckckckck ck ck ck ck ck ck ck ck ck ckokokokck kck ck ck ck ck ck ck ck ck k ck ko ke ke ke ke J 
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@impor 
@impor 


// 核心 
@impor 
@impor 
@impor 


// 重 置 
@impor 
@impor 


// 核心 
@impor 
@impor 
@impor 
@impor 
@impor 
@impor 


Gimport 
Gimport 


// 组 件 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 
Gimpor 


// 组 件 
Gimpor 
Gimpor 
Gimpor 
Gimpor 


// 工具 


Gimpor 


// 导入 
Gimpor 


"includes/variables"; 
"variables"; // 定制 变量 


变量 与 混入 


"../../vendor/ 
"../../vendor/ 
"../../vendor/ 


"../../vendor/ 
"../../vendor/ 


./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 


SW Me, Pel MES OC RAO P 


./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./ vendor / 
./ vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
./vendor/ 
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w/ JavaScript 


"../../vendor/ 
./../vendor/ 
"../ ../vendor/ 
/../vendor/ 


"../../vendor/ 


定制 混入 
"includes/mixins"; 





DOO 
DOO 
DOO 


DOO 
DOO 


DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 


DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 
DOO 


DOO 
DOO 
DOO 
DOO 





DOOL 





trap/scss/custom"; 
trap/scss/variables"; 
trap/scss/mixins"; 


trap/scss/normalize"; 
trap/scss/print"; 


trap/scss/reboot"; 
trap/scss/type"; 
trap/scss/images"; 
trap/scss/code"; 
trap/Bcss/grid"'; 
trap/scss/tables"; 
trap/scss/forms"; 
trap/scss/buttons"; 


trap/scss/animation"; 
trap/scss/dropdown"; 
trap/scss/button-group"; 
trap/scss/input-group"; 
trap/scss/custom-forms"; 
trap/scss/nav"; 
trap/scss/navbar"; 
trap/scss/card"; 
trap/scss/breadcrumb"; 
trap/scss/pagination"; 
trap/scss/tags"; 
trap/scss/jumbotron"; 
trap/scss/alert"; 
trap/scss/progress"; 
trap/scss/media"; 
trap/scss/list-group"; 
trap/scss/responsive-embed"; 
trap/scss/close"; 


trap/scss/modal"; 
trap/scss/tooltip"; 
trap/scss/popover"; 
trap/scss/carousel"; 





trap/scss/utilities"; 
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// 页 面 元 素 

Qimport "includes/page-header"; 
@import "includes/navbar"; 
QGimport "includes/sidebar"; 
QGimport "includes/footer"; 

// 页 面 


QGimport "includes/blog"; 


// 导入 定制 样式 


QGimport "main"; 


运行 gulp styles 命令 ， 编 译 CSS 代码 并 测试 效果 























o 


4.5 WordPress 5 Bootstrap 之 间 的 冲突 一 一 预定 义 CSS 类 


WordPress 中 的 HTML 页 面包 含 了 很 多 用 于 设置 默认 样式 的 CSS 类 。 而 诸如 JBST 4 这样 的 
主题 可 以 履 写 WordPress 的 默认 HTML 代码 ， 改 变 WordPress 站 点 中 的 HTML 元 素 结构 。 


可 以 访问 ， 了 解 更 多 有 关 WordPress 模板 层级 的 信息 。 以 搜索 表单 为 例 。 可 以 通过 调用 
WordPress 中 的 get_search_form() 这 一 PHP 函数 ， 在 网 站 上 显示 站 点 搜索 表单 。 该 了 本数 会 返 
回 如 下 搜索 表单 的 HTML 代码 : 


«form role-"search" method-"get" id-"searchform" 








class-"searchform" action-"«?php echo esc url( home url( '/' ) ); ?>"> 
«div» 
«label class-"screen-reader-text" for-"s"»«?php x( 'Search for:', 
'label' ); ?»«/label» 
«input type="text" value-"«?php echo get search query(); ?>" name-"s" id-"s" /> 
«input type-"submit" id-"searchsubmit" 
value-"«?php echo esc attr x( 'Search', 'submit button' ); ?»"/» 
«/div» 
</form> 





HRES, UAI SCSS 代码 , 将 其 编译 成 CSS 代码 后 用 来 调整 上 述 表单 的 样式 。 至 
于 Bootstrap ， 由 于 其 表单 相关 的 CSS 代码 所 对 应 的 HTML 结构 与 WordPress 中 的 并 不 一 致 ， 
此 ， 可 以 在 WordPress 的 主题 目录 下 创建 searchform.php 文件 ， 编 写 自 定义 的 HTML 代码 并 履 写 
WordPress 默认 的 搜索 表单 。JBST 主题 中 searchform.php 文件 内 的 HTML 代码 如 下 : 


«form role-"search" method-"get" class-"search-form" action-"«?php echo 
home urit '/' yy ?»"'- 
«div class-"input-group"» 

«input type-"search" class-"form-control" placeholder-"«?php echo 
esc attr x( 'Search...', 'search', 'jbst-4' ) ?»" value-"«?php echo 
get search query() ?»" name-"s" /» 

«span class-"input-group-btn"» 

«button class="btn btn-secondary" type-"button"»«?php echo 

esc attr x( 'Search', 'search', 'jbst-4' ) ?»«/button» 
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</span> 
</div> 
</form> 


可 以 看 到 ， 这 一 表单 的 HTML 结构 及 其 对 CSS 类 的 使 用 与 Bootstrap 中 的 设计 保持 一 致 。 


除 此 之 外 ， 还 需要 编辑 scss/includes navbar.sess 文件 中 的 SCSS 代码 : 


4.5. 

















是 由 
事 。 


.navbar { 
.Search-form { 
Gextend .pull-md-right; 
Ginclude media-breakpoint-up(md) ( 
.input-group ( 
max-width: 300px; 
j 


} 


本 章 稍 后 将 引导 你 为 主导 航 创建 WordPress 菜单 ， 并 将 其 转换 成 Bootstrap 中 的 导航 条 。 


1 将 导航 菜单 转换 成 Bootstrap 导航 条 


Bootstrap 中 ， 导 航 条 内 的 项 目 和 链接 需要 使 用 特殊 的 CSS 类 来 定义 样式 。 但 由 于 菜单 组 件 
PHP 函数 wpo_nav_menu () 动 态 生 成 的 ， 因 此 想 要 对 其 中 的 每 个 菜单 项 增添 CSS 类 并 非 易 
wp. nav, menu () 函数 接受 一 系列 参数 。 其 中 ，walker 参数 可 用 于 指定 定制 的 WordPress 








walker 类 的 实例 ,用 于 遍历 树 型 数据 结构 并 将 其 泻 染 成 HTML 代码 。 借 助 菜单 walker 28, 可 





以 调 


用 wo. nav. menu () 函数 来 生成 定制 菜单 。 
除 此 之 外 , JBST 主题 还 在 parts/nav-topbar.php 文件 中 使 用 了 定制 的 PHP walker 类 , 生成 的 





HTML 代码 如 下 所 示 : 


«nav class-"navbar navbar-light bg-faded navbar-full" role="navigation"> 
«div class-"navbar-toggleable-sm collapse"id-"CollapsingNavbar"-» 
«a class-"navbar-brand" href-"http://wordpress"'» 
WordPress Weblog Theme 
</a> 
<ul class="nav navbar-nav"> 
<li class="nav-item"> 
<a href="http://wordpress" class="nav-link active">Home <span 
class="sr-only">(current)</span></a> 
«/li» 
«li class-"nav-item"- 
«a href-"http://wordpress/?page id-2" class-"nav-link"»Sample Page</a> 
</li> 
<li class="nav-item"><a class="nav-link"><img class="your-photo img-circle" 
src=" /wp-content/themes/jbst-weblog-theme/assets/images/you.png" alt="Your photo" 
height="140" width="140"></a></li> 
<li class="nav-item"><a href="http://wordpress/?page_id=6" 
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class-"nav-link"»Page 3«/a»«/li» 
«li class-"nav-item"»«a href-"http://wordpress/?page id-9" 
class-"nav-link"»Page 4«/a»«/li» 
«/ul» 
«form class-"form-inline pull-md-right search-form" action-"http://wordpress/"» 
«input class-"form-control" type="text" placeholder-"Search"'» 
«button class="btn btn-primary-outline" type-"button"»Search«/button» 
</form> 
</div> 
</nav> 


综 上 所 述 ，JBST 主题 会 将 WordPress 的 HTML 代码 结构 转换 为 Bootstrap 中 标准 的 HTML 
代码 ， 同 时 使 用 Bootstrap 中 定义 的 CSS 类 。 而 转换 后 的 导航 HTML 结构 也 使 得 我 们 可 以 复 用 第 
3 草 中 编写 的 SCSS 代码 。 


另 一 方面 ， 若 不 使 用 PHP 中 的 walker 类 ， 则 主导 航 的 HTML 代码 如 下 : 


«div class="menu-main-navigation-container"> 
«ul id-"menu-main-navigation" class-"menu"- 
«li id-z"menu-item-4" class-"menu-item menu-item-type-custom 
menu-item-object-custom menu-item-home menu-item-4"-» 
«a href-"http://wordpress"»Homec/a»«/li» 
«li id-z"menu-item-5" class-"menu-item menu-item-type-post type 
menu-item-object-page menu-item-5"-» 
«a href-"http://wordpress/?page id-2"»Sample Page«c/a»«/li» 
«li id-z"menu-item-12" class-"menu-item menu-item-type-custom 
menu-item-object-custom menu-item-12"-» 
«a»«img class-"your-photo img-circle" src-"/wp-content/themes/jbst-weblog-theme/ 
assets/images/you.png" alt-"Your photo" height-"140" 
widthz"140"»«/a»«/li» 
«li id-z"menu-item-7" class-"menu-item menu-item-type-post type 
menu-item-object-page menu-item-7"-» 
«a href-"http://wordpress/?page id-6"»Page 3«/a»«/li» 
«li id-z"menu-item-10" class-"menu-item menu-item-type-post type 
menu-item-object-page menu-item-10"-» 
«a href-"http://wordpress/?page id-9"»Page 4«/a»«/li» 
«/ul» 
«/div» 


可 以 在 scss/includes/ navbar.sess 文件 的 末尾 添加 以 下 SCSS 代码 ， 调 整 上 述 HTML 代码 的 

样式 : 

.menu-main-navigation-container { 
Gextend .navbar-toggleable-sm; 
Gextend .collapse; 
ul ( 

Gextend .nav; 
Gextend .navbar-nav; 
iu f 
Gextend .nav-item; 
a ( 
Gextend .nav-link; 





qu 
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} 
} 
} 
} 


通过 搜索 表单 和 导航 条 这 两 个 例子 可 以 看 到 , 在 WordPress 中 使 用 Bootstrap 可 以 采用 多 种 策 
略 : 可 以 改变 WordPress 的 HTML 输出 以 适应 Bootstrap 的 编码 标准 ; 也 可 以 编写 SCSS 代码 , 用 
WordPress 里 的 CSS 类 扩展 Bootstrap 中 的 CSS 类 。 这 两 种 策略 都 很 有 用 ， 但 当 不 能 简单 地 扩展 
Bootstrap 的 CSS 类 , 而 必须 编写 新 的 复杂 的 SCSS 代码 以 适 配 WordPress 中 默认 的 HIML 时 , 改 
变 输出 的 HTML 代码 会 是 更 好 的 选择 。 


4.5.2 ”关于 网 格 


WordPress 的 默认 页 面 中 有 一 个 主 内 容 区 域 和 一 个 侧 边 栏 ,在 第 3 章 中 , 侧 边 栏 的 宽度 为 25% 
( col-md-3 ). 但 JBST 4 主题 的 侧 边 栏 宽度 却 为 33.3% ( col-md-4 )。 因 此 , 主 内 容 区 域 中 设计 需要 
占据 其 75% ( col-md-9 ) 的 宽度 ,但 主题 设置 的 宽度 却 为 66.6% ( col-md-9 )。 可 以 通过 更 改 主题 
目录 中 index.php、page.php 和 sidebar.php 文件 里 的 CSS 网 格 类 来 解决 这 一 问题 。 


正如 第 1 章 所 述 ， 也 可 以 使 用 Bootstrap 中 网 格 相关 的 混入 和 变量 来 实现 相同 的 效果 。 例 如 ， 
可 以 创建 一 个 新 的 Sass 局 部 文件 (_grid.scss )， 然 后 在 其 中 编写 以 下 SCSS 代码 : 


main[role-"main"] ( 
Ginclude make-col(); 
Ginclude media-breakpoint-up(md) ( 
Ginclude make-col-span(9); 
j 
+ .Sidebar ( 
Ginclude make-col(); 
Ginclude media-breakpoint-up(md) ( 
Ginclude make-col-span(3); 
j 
j 
} 


由 于 main[role="main"] 选 择 符 具有 一 定 的 通用 性 ， 在 JBST 4 主题 的 多 个 布局 文件 中 均 
能 得 到 匹配 ， 因 此 上 述 代 码 将 改变 template-full-width.php 文件 中 的 页 面 宽 度 布局 。 


请 注意 ， 除 了 以 上 操作 ， 还 必须 将 assets/scss/ variables.scss 文件 中 的 Sass 变量 
$enable-grid-classes 设置 为 false， 从 而 在 编译 Bootstrap 时 移 除 网 格 类 。 

































































4.6 配置 导航 条 
在 本 节 中 ， 我 们 将 为 网 站 页 面 设置 导航 条 , 同时 继续 为 导航 条 添加 标记 。 
再 次 单 击 WordPress 主题 页 上 的 定制 按钮 。 在 菜单 栏 下 创建 一 个 名 为 Main navigation 的 新 
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Iri 


菜单 ， 勾 选 The main menu 和 Automatically add new top-level pages to this menu 3#} 








Customizing » Menus 


Main navigation 
Main navigation 
Home Custom Link v 
Sample Page Page v 


Reorder 十 Add Items 


Menu locations 


The Main Menu (Current: Main navigation) 


| Footer Links 





Menu options 


Automatically add new top-level pages to 
this menu 











然后 在 菜单 中 添加 一 些 项 目 。 在 Pages 选项 下 选中 Home 和 Sample Page. 











Search menu items... 
Custom Links v 
Posts v 
Pages A 
v Home Custom Link 
十 Sample Page Page 
Categories Y 
Tags 





之 后 点 击 Save & Publish 按钮 ， 关 闭 定 制 面板 。 


之 前 示例 模板 的 主导 航 中 包括 了 四 个 菜单 链接 和 正中 间 的 照片 , 因此 除了 之 后 将 添加 的 照片 
外 ， 我 们 还 需要 增加 两 个 页 面 。 
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在 WordPress 的 仪表 盘 中 ， 点 击 Pages | Add new， 然 后 添加 两 张 新 页 面 。 
最 后 ， 导 航 条 应 如 下 图 所 示 。 


WordPress Weblog Theme Ee 
Searcl Search 


在 下 一 节 中 ,我 们 将 复 用 第 3 章 里 的 HTML 和 Sass 代码 。 




















4.6.1 更 新 HTML 代码 


接 下 来 ， 编 辑 主题 目录 下 parts 目录 中 的 nav-topbarphp 文件 。 可 以 将 第 3 章 中 的 html/includes/ 
navbar.html 文件 作为 样 例 ， 删 除 其 中 的 导航 条 商标 和 搜索 表单 。 修 改 后 的 HTML 和 PHP 代码 应 
如 下 所 示 : 


«div class="container bg-primary-color"> 
«nav class-"navbar navbar-dark" role="navigation"> 
«div class-"nav navbar-nav navbar-toggleable-sm collapse" 
id-"CollapsingNavbar"'» 





«a class-"navbar-brand" href-"«?php echo home url(); ?»"» 
<?php bloginfo('name'); ?»«/a» 
«?php jbst4 top nav(); ?» 
«/div» 
</nav> 
</div> 


请 注意 , 在 上 述 代码 中 , 导航 条 被 封装 在 <div class-"container bg-primary-color"> 
容器 内 , 而 <nav> 标 签 上 设置 有 navbar fll navbar-dark 类 。 





4.6.2 ”将 照片 置 于 导航 条 正中 间 


首先 , 将 照片 复制 到 主题 目录 下 的 assets/images 目录 中 。 然 后 打开 定制 面板 , 或 访问 WordPress 
仪表 盘 页 面 中 的 Appearance | Menus 区 域 ， 在 菜单 中 添加 新 的 项 目 。 











URL # 

Link Text <img class="your-photo ii 
Add to Menu 

Categories - 











在 Navigation label 字段 中 输入 以 下 HTML 代码 : 
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«img class-"your-photo img-circle" src-"/wp-content/themes/jbst-weblog-theme/ 
assets/images/you.png" alt-"Your photo" height-"140" width-"140"» field should 
contain the # sign, you will remove it in the next step to ensure «a» tag around 
the image does not have a href attribute. 


可 以 看 到 ， 照 片 仍 被 封装 在 <a> 标 签 中 。 该 标签 没有 href 属性 ， 却 依旧 表现 出 鼠标 悬 停 及 
图 片 位 置 变化 的 效果 。 可 以 通过 以 下 SCSS 代码 ,修改 assets/styles/scss/includes/_navbar.scss 文件 
中 图 片 选择 符 相 关 的 样式 来 修复 这 些 问 题 : 


fr URL 字段 中 ,输入 的 值 应 包含 # 符 号 。 在 下 一 步 中 ， 我 们 将 移 除 该 # 符 号 ， 确 保 图 片 元 素 
外 的 <a> 标 签 中 不 包含 href 属性 。 


如 果 WordPress 安装 在 诸如 /wordpress/ 这 样 的 子 目 录 中 ， 则 代码 中 的 图 片 链接 地 
Cp 址 需 做 相应 的 变更 。 此 外 ， 链 接地 址 中 jost-weblog-theme 字样 应 与 主题 目 
录 的 名 称 保持 一 致 


点 击 Add to menu 按钮 ， 保存 新 的 菜单 项 。 将 该 菜单 项 拖 忠 到 第 三 个 也 是 最 中 间 的 那个 位 置 ， 
然后 单 击 项 目 右 侧 的 箭头 ， 对 其 进行 配置 。 删 除 URL 字段 中 的 # 符 号 。 


pl 





























Sample Page Page v 


<img class-"your-photo Custom Link 4 
img-circle" src="/wp-content 
Ithemes/jbst-weblog-theme/assets 

limages/you.png" alt-"Your 

photo" height-"140" width-"140"» 


URL 


Navigation Label 


«img class-"your-photo img-circle" src-"/wp-content/the 


Move Up one Down one Under Sample Page To the top 





Remove | Cancel 


Page3 Page v 











结束 后 ， 按 下 Save menu 按钮 。 访 问 网 站 ， 并 检查 以 上 改动 的 效果 。 


可 以 看 到 ， 照 片 仍 被 封装 在 <a> 标 签 中 。 该 标签 没有 href 属性 ， 却 依旧 表现 出 鼠标 悬 停 及 
图 片 位 置 变化 的 效果 。 可 以 通过 以 下 SCSS 代码 , 修改 assets/styles/scss/includes/_navbar.scss 文件 
中 图 片 选择 符 相 关 的 样式 来 修复 这 些 问 题 : 


.nav-item:nth-child(3) .nav-link { 
display: none; 
Ginclude media-breakpoint-up(md) ( 
position: absolute; 
top: -100$; 





ni 
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z-index: 1; 
display: block; 
&.active, 
&:hover ( 


background-color: transparent; 
j 














4. 设置 博客 的 页 丑 





打开 主题 目录 下 的 headerphp 文件 并 进行 编辑 。 在 topbar 模板 部 分 的 内 容 前 添加 下 面 这 行 
PHP 代码 : 


«?php get template part( 'parts/page', 


'header' ); ?> 








在 存放 局 部 模板 的 parts 目录 中 创建 名 为 page-headerphp 的 文件 ,编辑 添加 以 下 HTML 和 PHP 
代码 : 








<header class="container bg-primary-color-dark"> 
<div class="row"> 


«div class-"col-xs-12 bg-primary-color-dark"> 
«button class-"navbar-toggler hidden-md-up pull-xs-right" 


type-"button" 
data-toggle-"collapse" data-target-"fCollapsingNavbar"-» 




















«/button» 
«hl class-"display-3"»«?php bloginfo('name'); ?»«/h1l» 
</div> 
</div> 
</header> 
上 述 PHP 代码 中 的 <?php bloginfo('name'); ?> 会 自动 在 页 眉 上 显示 博客 的 名 称 。 请 注 
意 ， 作 为 页 眉 的 一 部 分 ， 汉 堡 菜单 


图 标 会 负责 在 小 视 口中 切换 显示 菜单 内 容 。 


4.8 TZD BW 





添加 页 脚 的 工作 和 添加 页 眉 一 样 简 单 ， 只 要 编辑 主题 目录 中 的 footerphp 文件 即 可 。 同样 ， 
可 以 将 第 3 EA html/includes/page-footer.html 文件 作为 样 例 。 


修改 后 ，footerphp 文件 中 的 HTML 和 PHP 代码 如 下 所 示 : 
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«footer class-"container page-footer bg-dark"'» 
«div class="row"> 
«div class-"col-md-6"-» 

«p class-"page-foooter-text"»Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus.«/p» 

«nav role-"navigation"» 


<?php jbst4 footer links(); ?> 
«/nav» 
«div class-"social-buttons"-» 
«ul» 
«li»FB«/li» 
«li»TW«/li» 
«li»G««/li» 
«/ul» 
</div> 
</div> 


<div class="col-md-6"> 
<h3>Join our Newsletter</h3> 
<div class="input-group"> 
<input type="text" class="form-control" placeholder="Your e-mail"> 
<span class="input-group-btn"> 
<button class="btn btn-accent-color" type="button"> 





Subscribe</button> 


</span> 
</div> 
</div> 
<div class="col-xs-12 text-xs-center"> 
&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. 
</div> 
</div> 
</footer> 
<?php wp_footer(); ?> 
</body> 
</html> <!-- end page --> 





PHP 代码 中 包含 <?php jbst4 footer links(); ?> 的 <nav> 元 素 可 用 于 在 页 脚 中 显示 链 
接 菜单 。 配 置 菜单 时 可 在 WordPress 面板 中 选择 Footer Links 菜单 。 


如 需 调 整 页 脚 中 链接 菜单 的 样式 ， 则 需 自行 在 assets/scss/includes/ footerscss 文件 中 添加 
SCSS 代码 。 类 似 的 SCSS 代码 如 下 : 


page-footer { 
nav[role-"navigation"] ( 
ul ( 

list-style: none; 

margin: 0; 

padding: 0; 

li ( 
float: left; 
padding: 10px; 





) 


Ginclude clearfix; 
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j 
j 


另外 值得 注意 的 是 ， 在 页 脚 中 我 们 增加 了 额外 一 行 网 格 来 放置 版 权 信息 : 


«div class-"col-xs-12 text-xs-center"-» 
&copy; «?php echo date('Y'); ?> «?php bloginfo('name'); ?>. 
«/div» 


页 脚 左 侧 用 于 显示 社交 媒体 链接 的 代码 也 要 添加 在 footer. php 文件 中 : 


«div class-"social-buttons fixed-media bg-accent-color"> 
<ul> 
<li>FB</li> 
<li>TW</li> 
<li>G+</li> 











</ul> 
</div> 


4.9 调整 博客 文章 的 样式 


首先 ， 在 hello world 这 篇 博客 中 添加 一 张 图 片 。 在 WordPress 的 仪表 盘 中 编辑 该 博客 文章 ， 
并 添加 特色 图 片 (Featured Image )， 如 下 图 所 示 。 




















Featured Image - 


[= ——— 





Click the image to edit or update 


Remove featured image 














操作 前 ， 请 确保 WordPress 安装 路 径 下 的 wp-content/uploads 目录 开放 了 可 写 权 
qb 限 ， 从 而 在 其 中 保存 上 传 的 媒体 文件 。 有 关 文 件 权限 的 更 多 信息 ， 可 参阅 


https://codex.wordpress.org/Changing File Permissions, 


接着 ， 编 辑 loop-archive.php 文件 ， 编 写 以 下 HTML 和 PHP 代码 : 


«article id="post-<?php the ID(); ?>" <?php post class(''); ?> role-"article"»- 
<?php the post thumbnail('ful1'); ?> 
«div class-z"blog-post"» 
«header class-"article-header"» 
«h2»«a href-"«?php the permalink() ?>" rel-"bookmark" ><?php 
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the title(); ?»«/a»«/h2» 
«?php get template part( 'parts/content', 'byline' ); ?» 
«/header» «!-- end article header --- 


«section class-"entry-content" itemprop-"articleBody"-» 
<?php the content('«button class="btn btn-accent-color"»Read 
more...«/button»'); ?» 


«/section» «!-- end article section --> 


«footer class-"article-footer"'-» 


«p class-"tags"»«?php the tags('»«small class-"text-muted"»' . _ ('Tags:', 
'jbst-4') . '«/small» ', ', ' S/S 
</footer> <!-- end SE es footer --> 
</div> 
«/article» «!-- end article --> 


述 代码 中 , 用 于 显示 特色 图 片 的 PHP 函数 调用 the post. thumbnail('full'); BERE 
To 同时 也 增加 了 <aiv class-"blog-post" ></div> 这 一 封装 ARR, 用 于 设置 blog- 
post 这 一 CSS 类 ， 从 而 使 用 scss/includes/ blog.scss 文件 中 的 SCSS 代码 。 


4.10 ”博客 中 的 侧 边 栏 


侧 边栏 的 HTML 和 PHP 代码 包含 在 主题 目录 内 的 sidebarphp 文件 中 ， 用 于 加 载 WordPress 
的 小 工具 组 件 。 可 以 在 WordPress 的 仪表 盘 中 管理 这 些小 工具 , 访问 Appearance | Widget 面板 ， 
配置 这 些小 工具 。 


每 个 小 工具 都 有 其 内 置 的 HTML 结构 和 Css 类 。 在 注册 侧 边栏 时 ， 可 以 修改 这 些 HTML 和 
CSS 结构 。 而 在 JBST 4 主题 中 , 侧 边 栏 代码 注册 在 assets/functions/sidebar.php 文件 中 , 如 下 所 示 : 





register sidebar (array ( 
'id' => 'sidebarl', 
'name' => | ('Sidebar 1', 'jbst-4'), 
'description' => | ('The first (primary) sidebar.', 'jbst-4'), 
'before widget' => '«div id-"$1$s" class-"widget %2$s">', 
'after widget' => '«/div»', 
'before title' => '«h4 class-"widgettitle"»', 
'after title' => '«/h4»', 
)); 


可 以 访问 https://codex.wordpress.org/Function Reference/register sidebar fe https://codex. 
qD wordpress.org/Function Reference/the _ widget， 了解 更 多 有 关注 册 和 配置 侧 边栏 的 
信息 。 


当 编 写 侧 边栏 及 其 小 工具 的 SCSS 代码 时 ， 可 以 采用 两 种 策略 : 在 某 处 统一 设置 侧 边栏 的 样 
式 ， 或 针对 每 个 小 工具 创建 其 特定 相关 的 样式 规则 。 


如 果 选 择 统一 设置 侧 边栏 样式 ， 则 可 按 以 下 方式 编辑 assets/scss/includes/_sidebar.scss 文件 中 
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的 SCSS 代码 : 


.Sidebar ( 
padding: $spacer-y $spacer-x ($spacer-y / 3); 
margin-top: $spacer-y; 
background-color: $light-color; 
border: 1px solid $gray-dark; 
} 


请 注意 , 样式 规则 是 应 用 在 侧 边 栏 选择 符 上 的 。 由 于 可 能 存在 多 处 对 该 选择 符 的 使 用 ,因此 
上 述 代码 可 能 会 影响 主题 中 其 他 内 容 的 显示 。 


运行 gulp 命令 后 ， 侧 边栏 会 如 下 图 所 示 。 



































earc Search 
Recent Posts 

* Hello world! 
Recent Comments 

* Mr WordPress on Hello world! 


Archives 
* May 2016 























接 下 来 ， 我 们 将 介绍 如 何 针对 小 工具 来 设置 侧 边栏 的 样式 。 首 先 ， 用 以 下 方式 修改 assets/ 
scss/includes/ sidebar.scss 文件 中 的 SCSS 代码 : 


.Sidebar ( 
.widget { 
padding: $spacer-y $spacer-x ($spacer-y / 3); 
margin-top: $spacer-y; 
background-color: $light-color; 
border: 1px solid $gray-dark; 


gulp 命令 后 ， 小 工具 会 如 下 图 所 示 。 








Search 








Recent Posts 


* Hello world! 








Recent Comments 


* Mr WordPress on Hello world! 























现在 , 该 在 SCSS 代码 中 通过 继承 Bootstrap 的 列表 组 CSS , 将 小 工具 内 的 列表 转换 成 Bootstrap 
的 列表 组 。 示 例 SCSS 代码 如 下 : 
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sidebar ( 
widget ( 
ul ( 
Gextend .list-group; 
aae 
Gextend .list-group-item; 
} 
} 
} 


} 
如 果 gulp watch 命令 未 运行 ， 则 可 再 次 运行 gulp 命令 。 运 行 后 可 以 发 现 ， 小 工具 中 的 列 
表 样 式 已 经 被 调整 为 像 Bootstrap 列表 组 那样 了 。 不 过 还 有 一 处 和 设计 预期 不 一 致 : 当 鼠 标 悬 停 


到 Bootstrap 的 列表 组 上 时 , 背景 色 不 会 发 生 任何 变化 。 可 以 通过 扩展 SCSS 代码 解决 该 问题 。 修 


改 后 的 SCSS 代码 如 下 所 示 : 








sidebar ( 
widget ( 
ul ( 

Gextend .list-group; 

T3. d 
Gextend .list-group-item; 
padding: 0; 
a { 


display: block; 
padding: .75rem 1.25rem; 
text-decoration: none; 

QGinclude hover-focus-active ( 
$list-group-link-hover-color; 


color: 
$list-group-hover-bg; 


background-color: 


EX SCSS 代码 将 1i 选择 符 中 的 内 边 距 设置 移 到 了 a 选择 符 中 。 同 时 ，a 选择 符 还 声明 了 
display: block; 规 则 ， 用 于 确保 链接 和 其 他 块 级 元 素 一 样 占据 所 有 可 用 空间 。 


修改 后 的 小 工具 会 如 下 图 所 示 。 








Meta 


Log out 
Entries RSS 
Comments RSS 


WordPress.org 
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请 注意 ， 由 于 该 代码 中 每 个 列表 项 都 会 包含 两 个 链接 ( <a> 标 签 )， 因 此 会 破坏 “近期 评论 ” 
部 分 的 内 容 的 结构 和 样式 。 如 果 发 现 页 面 上 出 现 问题 ， 则 可 以 通过 在 ul.recentcomments 选 
择 符 上 创建 特殊 的 样式 规则 来 进行 修复 。 


正如 你 所 看 到 的 ， 默 认 情 况 下 列表 组 不 会 处 理 链接 悬 停 效 果 。Bootstrap 中 支持 该 效果 的 是 
Nav 导航 组 件 。 就 本 章 示 例 而 言 ，Nav 组 件 中 的 堆 释 式 导 航 比较 适合 我 们 的 需求 。 可 以 将 
assets/scss/includes/_sidebar.scss 文件 中 的 相关 代码 替换 成 以 下 SCSS REB, ENTR PERRE 
式 导 航 组 件 : 


.widget { 
padding: $spacer-y $spacer-x ($spacer-y / 3); 
margin-top: $spacer-y; 
background-color: $light-color; 
border: 1px solid $gray-dark; 
ul ( 
Gextend .nav; 
Gextend .nav-pills; 
Gextend .nav-stacked; 
l3 $4 
Gextend .nav-item; 
// 给 列表 项 添加 边框 并 增加 负 外 边 距 使 样式 更 好 
margin-bottom: -$1ist-group-border-width; 
background-color: $list-group-bg; 
border: $list-group-border-width solid $list-group-border-color; 
aí 
Gextend .nav-link; 
border-radius: 0; 
Ginclude hover-focus-active ( 
color: $list-group-link-hover-color; 
background-color: $list-group-hover-bg; 
j 
j 

















j 
j 
} 


完成 后 ， 小 工具 会 如 下 图 所 示 。 
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4.11 BARMA 


在 Bootstrap 的 官方 网 站 示例 中 (http://v4-alpha.getbootstrap.com/examples/ )， 可 以 找到 滑 入 
式 效 果 的 例子 。 该 例子 会 展示 如 何 用 Bootstrap 搭建 可 切换 的 滑 和 人 式 导航 菜单 。 同 样 ， 也 可 以 在 
自己 的 主题 中 使 用 这 种 滑 入 式 侧 边栏 。 在 尺寸 较 小 的 视 口 中 ， 含 滑 和 人 式 菜单 的 页 面 效 果 如 下 图 
所 示 。 











WordPress 
Weblog Theme 


Pa o e 4 Toggle nav 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis 
dis parturient montes, nascetur ridiculus mus 


CIBC 
ES 


© 2016 WordPress Weblog Theme. 








当 在 该 页 面 中 单 击 Toggle nav 按钮 时 ， 页 面 内 容 会 往 左 侧 滑 动 ， 留 出 空间 显示 侧 边栏 。 


该 滑 入 式 菜单 使 用 了 主题 目录 中 的 template-offcanvas.php 模板 ,其 中 包含 以 下 HTML fil PHP 
代码 : 


<?php 
/* 
模板 名 称 : 滑 入 式 侧 边栏 
*y 


?» 





«?php get header(); ?» 
«div class-"container" id-"content"'» 


«div id-"inner-content" class="row row-offcanvas row-offcanvas-right"'» 
«main id-"main" class-"col-xs-12 col-md-8" role-"main"» 


«p class-"pull-xs-right hidden-md-up"» 
«button type="button" class="btn btn-primary btn-sm" data-toggle-"offcanvas"» 
<?php _e('Toggle nav', 'jbst-4') ?> 
</button> 
</p> 


<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
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«?php get template part( 'parts/loop', 'page' ); ?> 


«?php endwhile; endif; 
«/main» «!-- end #main --» 


«?php get sidebar('offcanvas'); ?» 
«div class-"clearfix hidden-xs-up"»«/div» 
</div> «!-- end dinner-content ---» 
</div> «!-- end dcontent --> 


«?php get footer(); ?» 


可 以 看 到 , template-offcanvas.php 文件 与 page.php 和 index.php 文件 很 相似 。 文件 开头 保存 了 
包括 模板 名 称 在 内 的 模板 注释 。 而 <div id="inner-content"> 元 素 上 则 额外 添加 了 两 个 新 的 
CSS 类 : row-offcanvas 和 row-offcanvas-right。row-offcanvas 类 会 在 相关 的 内 容 区 
域 上 设置 滑 入 滑 出 的 CSS 过 渡 效 果 , 而 row-offcanvas-rignt 类 则 会 将 该 区 域 置 于 页 面 右 侧 。 
main 元 素 上 声明 了 col-xs-12 这 一 CSS 类 ， 同 时 也 包含 了 切换 按钮 : 


<div class="pull-xs-right hidden-md-up"> 
«button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas"> 
<?php _e('Toggle nav', 'jbst-4') ?></button> 
</div> 
该 代码 中 使 用 的 niaden-ma-upe 类 会 确保 切换 按钮 仅 在 小 视 口中 显示 。 而 最 后 一 步 侧 边栏 
的 泻 染 则 由 <?php get sidebar('offcanvas'); ?> 这 一 PHP 函数 调用 来 完成 。 由 于 传人 参 
数 为 offcanvas， 最 终 加 载 的 是 sidebar-offcanvas.php 模板 ， 而 非 默 认 的 sidebarphp 模板 。 


与 sidebarphp 模板 类 似 ，sidebar-offcanvas.php 模板 中 会 包含 以 下 代码 : 


<div class="col-xs-6 col-md-4 sidebar sidebar-offcanvas" id="sidebar"> 




















«?php if ( is active sidebar( 'offcanvas' ) ) : ?> 
«?php dynamic sidebar( 'offcanvas' ); ?» 
«?php else : ?> 
«!-- This content shows up if there are no widgets defined in the backend. --> 
«div class-"alert help"- 
«p»«?php  e("Please activate some Widgets.", "jbst-4"); ?></p> 
</div> 
<?php endif; ?> 
</div> 





上 述 HTML 和 PHP 代码 中 使 用 了 col-xs-6 这 一 CSS 类 ， 并 加载 了 滑 和 人 式 侧 边栏 。 


至 此 ，HTML 代码 已 全 部 完成 。 接 下 来 ， 我 们 开始 调试 SCSS 和 JavaScript 代码 ， 完 成 对 滑 
人 人 式 菜 单 的 开发 工作 。 


SCSS 代码 保存 在 assets/scss/includes 目录 下 的 _offcanvas.scss 局 部 文件 中 。 先 确保 用 以 下 代 
码 将 该 文件 引入 到 styles.sess 文件 中 : 
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// 模板 
@import "includes/offcanvas"; 


_offcanvas.scss 这 一 局 部 文件 包含 的 SCSS 代码 如 下 : 


html, body { 
overflow-x: hidden; /* 避免 在 窜 视 口 设备 上 的 深 动 */ 


xf 
QGinclude media-breakpoint-down(sm) ( 
.row-offcanvas { 
position: relative; 
transition: all .25s ease-out; 
} 
.row-offcanvas-right { 
tight- 0s 
} 
.row-offcanvas-left { 
left: 0; 
} 
.row-offcanvas-right 
.Sidebar-offcanvas { 
right: «1009; y/* 12 columhg */ 
} 
.row-offcanvas-right.active 
.Sidebar-offcanvas { 
right: -50$; /* 6 columns */ 
) 
.row-offcanvas-left 
.Sidebar-offcanvas ( 
left: -100$; /* 12 columns */ 





} 
.row-offcanvas-left.active 
.Sidebar-offcanvas { 
left: -509; /* 6 columnas */ 
} 
.row-offcanvas-right.active { 
right: 50$; /* 6 columns */ 
} 
.row-offcanvas-left.active { 
left: 50%; /* 6 columns */ 
.Sidebar-offcanvas ( 
position: absolute; 
top: 0; 
width: 50$; /* 6 columns */ 
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最 后 ， 需 要 使 用 JavaScript 代码 来 启用 切换 按钮 。 在 assets/scripts/wp-jbstjs 文件 的 
jQuery (document).ready(function() {1)) ;代码 内 部 ， 可 以 看 到 以 下 JavaScript 代码 行 : 

// 滑 入 式 菜单 

jQuery('[data-toggle-"offcanvas"]').click(function () ( 


jQuery('.row-offcanvas').toggleClass('active'); 


)); 

















在 WordPress 的 仪表 盘 页 面 中 ,打开 Pages 面板 进行 编辑 。 如 下 图 所 示 , TE template 选项 中 
选择 新 的 offcanvas 模板 。 





Page Attributes A 
Parent 
(no parent) -| 
Template 
Off-canvas Side bar -| 
Order 
0 


Need help? Usethe Helptab in the upper 
right ofyour screen. 











保存 页 面 并 在 浏览 器 中 观察 结果 。 当 将 浏览 器 视 口 宽度 调整 至 小 于 768 像素 时 , 滑 入 式 菜单 
即 生效 ， 效 果 如 下 图 所 示 。 





Toggle nav 





Please activate some 
Widgets. 

erent from a blog post because it 

ow up in your site navigation (in 

with an About page that introduces 

hight say something like this: 


y day, aspiring actor by night, and 
ngeles, have a great dog named 
d gettin' caught in the rain.) 











然后 ,在 WordPress 的 仪表 盘 页 面 中 打开 Appearance | Widgets 面板 , 在 滑 人 式 菜单 中 添加 
一 些小 工具 。 请 注意 ， 由 于 滑 和 人 式 菜单 中 使 用 了 position:absolute; 定 位 声明 ， 因 此 当 其 高 度 
高 于 外 部 容器 时 , 菜单 的 内 容 就 会 与 页 脚 重 释 。 可 以 通过 设置 菜单 的 z-index 属性 来 修复 此 问题 。 
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如 果 需 要 在 首页 中 使 用 新 的 滑 和 信 式 菜单 ， 则 必须 将 某 张 静态 页 面 设置 为 首页 。 可 以 在 
WordPress 的 仪表 盘 页 面 中 打开 Settings | Reading 面板 , 选择 合适 的 静态 页 面 。 然 后 像 之 前 所 做 
的 那样 ， 对 该 页 面 设 置 模 板 。 

















Reading Settings 


Front page displays Your latest posts 


Q A static page (select below) 


Front page: Sample Page -| 





Posts page: [— Select — | ~ 











除了 更 改 首 页 设置 外 ， 也 可 以 通过 将 template-offcanvas.php 文件 复制 为 新 的 home.php 或 
front-page.php 来 实现 相同 的 效果 。 关 于 WordPress 的 模板 系统 ， 可 以 访问 https://developer. 
wordpress.org/themes/basics/template-hierarchy/， 了 人 解 更 多 相关 信息 。 





4.12 调整 按钮 的 样式 


到 目前 为 止 ， 我 们 的 设计 中 已 经 包含 了 多 种 按钮 : 页 脚 中 的 按钮 、 搜 索 按 钮 、 滑 人 式 菜 单 
的 切换 按钮 ， 以 及 评论 表单 中 的 按钮 。 接 下 来 ， 我 们 将 探索 用 更 好 的 方法 来 调整 主题 中 的 按钮 
样式 。 

还 记得 吗 ，Bootstrap 中 的 btn 和 btn-* 这 些 CSS 类 可 用 于 <button> 标 签 , 也 可 用 于 <a> 标 
签 和 <:input> 标 签 。 


首先 ， 创 建 名 为 assets/scss/includes/_buttons.scss 的 Sass 局 部 文件 ， 并 在 其 中 定义 btn-accent- 
color 的 样式 。 该 文件 中 应 包含 以 下 SCSS 代码 : 
.btn-accent-color { 


Ginclude button-variant (#fff, $accent-color, #fff); 


} 


和 之 前 一 样 ， 可 以 采用 两 种 策略 来 调整 主题 中 按钮 的 样式 。 我 们 可 以 使 用 HTML 代码 ， 确 
保 所 有 的 按钮 都 使 用 btn 和 btn-* 这 些 CSS 类 ,也 可 以 创建 通用 的 CSS 选择 符 , 调整 按钮 样式 。 


如 果 采 用 通用 的 选择 符 ， 则 assets/scss/includes/_buttons.scss 文件 中 的 SCSS 代码 如 下 : 


button, 
input[type-"submit"], 
.button { 
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Gextend .btn; 
Ginclude button-variant(Msfff, $accent-color, #fff); 


) 

虽然 以 上 代码 中 的 选择 符 通用 ,但 由 于 搜索 按钮 和 滑 入 式 菜单 的 切换 按钮 使 用 了 HTML 代 
IHP btn-primary 这 一 优先 级 更 高 的 CSS 类 , 因此 上 述 代 码 并 不 会 调整 这 两 种 按钮 的 样式 。 而 
在 另 一 方面 ， 导 航 条 的 切换 按钮 不 会 受 此 因素 影响 。 


因此 ， 在 本 例 中 ， 编 译 btn-accent-color 类 并 修改 相应 的 HTML 似乎 是 更 好 的 策略 。 
编辑 searchform.php 文件 ， 用 以 下 方式 在 搜索 按钮 上 添加 需要 的 CSS 类 : 


«button class-"btn btn-accent-color " type-"button"»«?php echo esc attr x('Search', 
'search', 'jbst-4' ) ?»«/button» 


如 之 前 所 见 , 滑 入 式 菜 单 的 切换 按钮 保存 在 template-offcanvas.php 文件 中 。 而 评论 表单 中 的 
按钮 则 保存 在 主题 目录 下 的 comments.php 文件 里 。 请 注意 ， 应 该 使 用 如 下 PHP 函数 调用 来 设置 
css 类 : 
































«?php comment form(array('class submit'-»'btn btn-accent-color')); ?> 





在 下 一 节 中 ， 我 们 将 更 详细 地 介绍 评论 界面 。 可 以 访问 https://codex.wordpress.org/Function _ 
Reference/comment form， 了 解 更 多 有 关 WordPress 中 comment_form()PHP 函数 的 信息 。 





Sass 的 其 他 改进 


当 不 断 地 往 WordPress 项 目 中 添加 内 容 、 页 面 和 插件 后 , 就 需要 调整 更 多 元 素 的 样式 。 对 此 ， 
本 章 介 绍 了 相关 的 知识 和 操作 策略 。 而 下 面 有 关 分 页 和 搜索 表单 按钮 的 提示 则 将 帮助 你 学 习 如 何 
用 正确 的 方式 来 完成 样式 调整 工作 。 

1. 分 页 

你 也 许 已 经 发 现 , 导航 条 中 当前 选中 状态 的 链接 并 未 如 预期 那样 设置 了 正确 的 背景 色 。 而 这 
一 问题 可 以 通过 在 scss/includes/_variables.scss 文件 中 添加 以 下 SCSS 代码 来 解决 : 

// 分 页 

$pagination-active-color: S$light-color; 


$pagination-active-bg: Saccent-color; 
$pagination-active-border: #ddd; // $pagination-border-color; 


2. 搜索 表单 中 的 按钮 

你 可 能 也 已 发 现 ， 侧 边栏 中 搜索 按钮 的 边框 颜色 在 白色 背景 上 并 不 好 看 。 可 以 通过 在 
_Imain.scss 文件 中 添加 以 下 SCSS 代码 来 解决 这 一 问题 : 

// 搜索 表格 按钮 


.Search-form { 
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.input-group-btn ( 
.btn ( 
border: $input-btn-border-width solid $input-group-addon-border-color; 
} 
} 
} 


改进 前 ， 搜 索 按钮 的 显示 结果 如 下 图 所 示 。 

















而 改进 后 ， 就 会 变 成 以 下 这 样 。 














4.13. 在 页 面 上 调整 评论 的 样式 








使 用 WordPress, 可 以 让 访客 对 自己 的 博客 文章 发 表 评 论 。JBST 主题 通过 Bootstrap 中 的 Media 











对 象 显示 评论 。 作 为 抽象 元 素 ，Media 对 象 被 用 作 搭 建 复杂 组 件 和 重复 型 组 件 的 基石 。 也 可 以 用 
它 来 调整 HTML 中 列表 的 样式 ， 从 而 更 好 地 显示 评论 信息 。 





在 JBSTA 主题 中 ,评论 相关 的 HTML 和 PHP 代码 保存 在 主题 文件 夹 下 的 comments.php 文件 


中 。 如 前 面 所 述 ， 该 文件 是 WordPress 模板 系统 的 一 部 分 ， 其 中 包含 了 以 下 PHP 片段 : 


«ol class="commentlist"> 


«?php wp list comments('type-comment&callback-jbst4 comments'); ?> 
</ol> 


用 于 显示 评论 列表 的 回调 函数 jbst4_comments 被 保存 在 assets/functions/comments.php X 


件 中 ， 其 中 包含 以 下 HTML 和 PHP 代码 : 


<?php 
// 评论 布局 
function jbst4 comments($comment, $args, $depth) { 
SGLOBALS['comment'] - $comment; ?» 
«li «?php comment class('media'); ?>> 
«div class-"media-left"-» 
<?php echo get avatar( $comment, 75, '', sprint( esc html  ( 'Avatar of %s', 
'jbst-4' ), get comment author() ), 
array('class' -» 'media-object')); ?> 
«/div» 
«div class-"media-body"-» 
«article id-"comment-«?php comment ID(); ?»" class-"clearfix col-1g-12"» 
«header class-"comment-author"» 
«?php 
// 创建 变量 
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$bgauthemail = get comment author email(); 
D 
<?php printf(  ('$s', 'jbst-4'), get comment author link()) ?> on 
«time datetime-"«?php echo comment time('Y-m-j'); ?>"> 
«a href-"«?php echo htmlspecialchars 
( esc url(get comment link( $comment-»comment ID )) )?>"> 
<?php comment time( (' F jS, Y - g:ia', 'jbst-4')); ?»«/a»«/time» 
«?php edit comment link( (*(Edit)', '"jbst-4'),' NILP o 
«/header» 
<?php if ($comment-»comment approved == '0') : ?> 
«div class-"alert alert-info"- 
«p» 
<?php e('Your comment is awaiting moderation.', 'jbst-4') ?> 
</p> 
</div> 


<?php endif; ?> 
<section class="comment_content clearfix"> 
<?php comment_text() ?> 
</section> 
<?php comment reply link(array merge( $args, array('depth' => 


$depth, 'max depth' => $args['max depth']))) ?> 
«/article» 
«/div» 
<!-- </li> is added by WordPress automatically --» 
«?php 
} 


上 述 代 码 会 用 Bootstrap 中 的 Media 对 象 将 评论 信息 封装 到 HTML 列表 中 : 


«ul class-"media-list"» 
«li class-"media"» 
«div class-"media-left"- 


«!-- avatar --» 
</div> 
«div class-"media-body"- 
«!-- comment ==> 
</div> 
«/li» 


«/ul» 


可 以 访问 http://v4-alpha.getbootstrap.com/layout/media-object/, 了 解 更 多 有 关 Bootstrap 
中 Media 对 象 的 信息 。 


默认 情况 下 ，JBST4 主题 中 的 评论 信息 会 如 下 图 所 示 。 


4.13 在 页 面 上 调整 评论 的 样式 115 








John Doe on March 14th, 2013 - 7:57am (Edit) 
Comment Depth 01 


Reply 
Jane Bloggs on March 14th, 2013 - 8:01am (Edit) 
Comment Depth 02 


Reply 
Fred Bloggs on March 14th, 2013 - 8:02am (Edit) 
Comment Depth 03 








Reply 








接 下 来 ,我们 将 调整 这 些 评论 信息 的 样式 , 使 其 符合 预期 设计 。 首 先 , 根据 配色 方案 ， 在 评 
论 区域 上 添加 背景 色 和 边框 , 编辑 assets/scss/includes/ comments.scss 文件 , 添加 以 下 SCSS 代码 : 





.Comments-area { 
.media-body { 
padding: S$spacer-y $spacer-x; 
margin-top: $spacer-y; 
background-color: $light-color; 
border: 1px solid $gray; 





} 


然后 ， 用 以 下 SCSS 代码 调整 日 期 和 作者 名 字 的 样式 : 


.comments-area { 
.comment-author { 
font-size: $font-size-sm 
Gextend .text-muted; 


} 


除了 使 用 上 述 SCSS 规则 ， 也 可 以 通过 修改 HTML 代码 来 实现 相同 的 效果 。 相 关 的 HTML 
代码 示例 如 下 : 


«small class="text-muted"> 
«time datetime="<?php echo comment time('Y-m-j'); ?>"> 
«a href-"«?php echo 
htmlspecialchars( esc url(get comment link($comment-»comment ID )) ) 
comment time( .(' F jS, Y - g:ia','jbst-4')); ?»«/a» 
</time> 
</small> 





?»"»«?php 


之 后 ， 可 以 开始 处 理 回复 按钮 。 可 通过 以 下 SCSS 代码 来 调整 按钮 的 样式 : 


.comments-area { 
.comment-reply-link { 
Gextend .btn; 
Gextend .btn-accent-color; 


) 
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最 后 ， 如 果 尚 未 运行 gulp watch 命令 ， 则 可 执行 gulp 命令 ， 在 浏览 器 中 观察 修改 后 的 结 
果 。 修 改 后 的 评论 信息 会 如 下 图 所 示 。 














John Doe on March 14th, 2013 - 7:57am (Edit) 
Comment Depth 01 


Reply 


Jane Bloggs on March 14th, 2013 - 8:01am (Edit) 
Comment Depth 02 


Fred Bloggs on March 14th, 2013 - 8:02am (Edit) 
Comment Depth 03 



























4.14 在 页 面 中 添加 传送 带 效 果 


Bootstrap 中 有 一 个 传送 带 组 件 ， 可 以 用 来 创建 循环 幻灯 显示 的 图 片 或 文字 。 HRE, 我 们 
也 可 以 将 这 一 传送 带 组 件 用 到 自己 的 WordPress 主题 中 。 


首先 ， 需要 将 自己 的 图 片上 传 到 主题 的 assets/images/slides 目录 中 。 其 中 ， 所 有 图 片 的 宽度 
和 高 度 都 必须 一 致 。 


比如 , 我 们 在 assets/images/slides 目录 中 添加 了 名 为 slidel.jpg、slide2.jpg 和 slide3 jpg 的 这 三 
张 基于 CCO Public Domain 许可 证 发 布 的 图 片 ( 可 通过 http://pixabay.com 网 站 下 载 )。 


在 下 一 节 中 , 我们 将 使 用 PHP 来 创建 模板 文件 所 需 的 HTML 输出 。 如 果 你 对 PHP 还 不 熟悉 ， 
则 可 访问 官方 网 站 http://php.net/ 来 进行 学 习 。 也 可 访问 Packt 出 版 社 网 站 上 的 PHP 页 面 
( https://www.packtpub.com/tech/php )， 学 习 PHP 的 基础 知识 。 


接 下 来 ,就 可 以 在 parts 目 录 中 创建 新 的 模板 文件 了 。 可 以 将 其 命名 为 component-carousel.php。 


在 该 component-carousel.php 文件 中 ， 需 要 将 assets/images 目录 下 的 图 片 地 址 关联 到 HTML/PHP 
代码 里 ， 如 下 所 示 : 


«div class-"carousel-inner" role-"listbox"-» 
<?php for ($i-1; $i«-3; $i++){?> 
«div class-"carousel-item«?php echo ($i--1) ? ' active' : ''?>"> 
«img src-"«?php echo get template directory uri(); 
?»/assets/images/slides/slide«?php echo $i ?».jpg" alt-"First slide"> 
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</div> 
«?php ) ?» 
«/div» 


可 以 访问 Bootstrap 传送 带 组 件 的 文档 页 面 ( https://getbootstrap.com/docs/4.3/components/ 
carousel/ )， 了 解 该 组 件 的 标记 结构 。 


修改 后 完整 的 HTML 和 PHP 代码 应 如 下 所 示 : 


«div id="carousel-example-generic" class-"carousel slide" data- 
ride-"carousel"'- 

«ol class-"carousel-indicators"» 

«li data-target-"Hscarousel-example-generic" data-slide-to-"0" 

class-"active"»«/li» 

«li data-target-"fHcarousel-example-generic"data-slide-to-"1"»«/li» 

«li data-target-"Hcarousel-example-generic"data-slide-to-"2"»«/li» 





«/ol» 
«div class-"carousel-inner" role-"listbox"- 
<?php for ($i-1; $i«-3; Si++) {?> 
«div class-"carousel-item <?php echo ($i--1) ? ' active' : ''?»"» 





«img src-"«?php echo get template directory uri(); 
?»/assets/images/slides/slide 
<?php echo $i ?».jpg" alt-"First slide"'- 
</div> 
<?php } ?> 
</div> 
«a class="left carousel-control" 
href-"4carousel-example-generic" role="button" data-slide-"prev"'-» 
«span class-"icon-prev" aria-hidden-"true"»«/span» 
«span class-"sr-only"»Previous«/span» 
</a> 
<a class="right carousel-control" 
href=" #carousel-example-generic" 
role="button" data-slide="next"> 
<span class="icon-next" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 


最 后 ， 需 要 在 首页 上 加 载 传送 带 组 件 。 编 辑 主题 目录 下 的 index.php 文件 ， 添 加 以 下 PHP 
片段 : 





<?php if(is home())( get template part( 'parts/component', 'carousel' ); ) ?> 
«?php if (have posts()) : while(have posts()) : the post(); ?» 














其 中 ，if(is_home()) 条 件 判断 语句 用 于 确保 该 传送 带 效 果 仅 在 首页 上 显示 。 
第 5 章 将 对 传送 带 组 件 的 搭建 做 更 详细 的 介绍 。 届 时 可 以 复 用 第 5 章 中 传送 带 组件 的 SCSS 











NU 
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代码 ,将 _carousel.scss 局 部 文件 复制 到 assets/scss/includes 目录 下 ， 并 在 styles.scss 文件 中 对 其 进 
行 引 用 ， 从 而 将 效果 复制 到 WordPress 主题 中 。 


可 以 在 浏览 咒 中 看 到 , 传送 带 组 件 的 效果 不 错 。 如 果 想 在 幻灯 显示 中 使 用 其 他 图 片 ， 则 可 将 
assets/images/slides 目录 下 的 图 片 文件 替换 掉 。 


如 果 是 网 站 项 目的 维护 者 , 这 么 做 完全 没什么 问题 。 但 若 需 要 将 网 站 和 主题 分 发 给 其 他 人 使 
用 ， 则 最 好 让 这 些 用 户 能 通过 仪表 盘 页 面 来 替换 传送 带 图 片 。 
在 WordPress 的 插件 目录 中 ， 有 很 多 可 用 于 扩展 仪表 盘 的 插件 。 其 中 就 包含 了 用 于 Bootstrap 


幻灯 效果 的 插件 。 WordPress 插件 目录 的 地 址 是 https://wordpress.org/plugins/。 而 https://wordpress. 
org/plugins/twitter-bootstrap-slider/ 的 插件 可 以 用 来 为 WordPress 项 目 添加 Bootstrap 的 传送 带 组 件 。 


















































4.15 在 主题 中 使 用 Font Awesome 字体 图 标 库 


第 5 章 将 介绍 如 何 用 Sass 把 Font Awesome 的 CSS 代码 编译 到 本 地 样式 表 中 。 除 此 之 外 , 也 
可 以 像 第 2 章 所 讲 的 那样 ， 通 过 CDN 来 运行 Font Awesome, 


可 以 将 Font Awesome CDN 的 URL 加 入 到 项 目 中 ,用 CDN 的 方式 在 WordPress 主题 中 运行 
该 字体 图 标 库 。 编 辑 并 添加 以 下 PHP 代码 行 ， 激 活 Font Awesome: 
// 加 入 外 部 字体 Awesome 样式 表单 


wp. enqueue style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/ 
4.6.3/csg/font-awesome.min.css'); 








用 Font Awesome 创建 社交 媒体 链接 


我 们 的 主题 在 两 块 区 域 中 用 到 了 社交 媒体 链接 : 一 个 固定 在 页 面 的 左 侧 , 另 一 个 则 位 于 页 脚 。 
两 块 区 域 的 HTML 代码 保存 在 footerphp 文件 中 。 为 避免 代码 重复 ， 可 创建 一 个 名 为 parts/ 
components-social-links.php 的 新 模板 。 然 后 在 其 中 编辑 以 下 HTML 代码 : 


<ul> 
<li><a href="https://twitter.com/bassjobsen"> 
«i class="fa fa-twitter fa-fs fa-lg"></i></a></1i> 
<li><a href-"https://facebook.com/bassjobsen"'» 
«i class="fa fa-facebook fa-fs fa-l1g"»«/i»«/a»«/li» 
<li><a href-"http://google.com/-«bassjobsen"» 
«i class-"fa fa-google-plus fa-fs fa-lg"»«/i»«/a»«/li» 
«/ul» 


在 该 HTML 代码 中 ，CSS 类 fa-fs 可 以 确保 每 个 图 标 都 拥有 相同 的 宽度 和 高 度 。 接 着 ,在 
footer.php 文件 中 将 <ul> 列 表 代 码 蔡 换 成 以 下 PHP 代码 : 


«?php get template part( 'parts/component', 'social-links' ); ?> 
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最 后 , 需要 在 SCSS 代码 中 针对 社交 媒体 区 域 做 一 些小 的 修改 。 先 将 _includes/_footer.scss X 
件 中 社交 媒体 相关 的 SCSS 代码 抽 提 到 一 个 名 为 includes/ social-button.scss 的 新 文件 中 。 注 意 不 
要 忘 了 在 styles.scss 文件 中 添加 SCSS 代码 片段 来 引入 这 一 新 文件 : 


// 组 件 
Qimport "includes/social-buttons"; 





_includes/_social-button.scss 文件 中 的 SCSS 代码 如 下 : 


.Social-buttons { 
&.fixed-media { 
display: none; 
Ginclude media-breakpoint-up(md) ( 
position: fixed; 
top: 150px; 
display: block; 
} 
} 
ul { 
padding: 0; 
margin: 0; 
list-style: none; 
Tas 
padding: 10px; 
border: 1px solid $accent-color-light; 
a ( 
color: $light-color; 
} 
} 
} 
.page-footer & { 
Tx 
float: left; 
Gextend .bg-accent-color; 
} 
} 
@include clearfix(); 


} 


最 后 ， 社 交 媒 体 按钮 会 如 下 图 所 示 。 





4.16 ”使 用 网 格 砌 体 模 板 


网 格 砌 体 布局 会 根据 网 页 上 垂直 方向 的 可 用 空间 大 小 , 将 元 素 放 在 最 佳 位 置 ,就 像 泥 瓦 折 在 
墙壁 上 艇 石头 一 样 。Bootstrap 中 的 Cards 就 是 这 样 一 个 可 以 用 CSS 组 织 元 素 〈 卡 片 )， 实 现 网 格 
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砌 体 效果 的 模块 .作为 内 容 容器 ,该 模块 灵活 而 可 扩展 ,因此 取代 了 Bootstrap 之 前 版 本 中 的 panel, 
thumbnail 和 well 组 件 。 


我 们 所 使 用 的 JBSTA 主题 中 已 经 包括 了 可 将 博客 文章 组 织 成 栏 砌 体 效 果 的 模板 。 


可 以 将 template-masonry 文件 复制 成 front-page.php, 或 者 选择 某 个 使 用 了 该 模板 的 页 面 作为 
首页 ， 来 测试 砌 体 模板 的 效果 。 
用 于 正确 显示 砌 体 项 目的 CSS 代 码 是 从 assets/scss/includes/_ masonry.scss 文件 中 编译 而 来 的 ， 
相关 的 SCSS 代码 示例 如 下 : 


.masonary { 
































.Card-columns { 
padding-top: $spacer-y; 
j 
} 
.mansory-blog-post { 
position: relative; 
padding: $spacer-vy $spacer-x; 
background-color: $1light-color; 
border: 1px solid $gray; 
j 


由 于 IE9 及 更 早 的 浏览 器 不 支持 CSS 属性 column-*, 因此 网 格 动 体 布局 在 这 些 
旧版 本 浏览 器 中 无 法 正常 工作 。 如果 需 要 测试 数据 来 测试 自己 的 主题 , 则 可 使 用 
本 章 附带 下 载 资源 中 的 data.xml 文 件 。 在 仪表 盘 页 面 中 ， 打 开 Tool|Import， 然 
后 安装 WordPress 引入 工具 ， 以 引入 文章 、 页 面 、 评 论 、 定 制 栏目 、 分 类 目录 和 

0 标签 等 之 前 导出 的 文件 。 我 们 会 使 用 import 功能 来 引入 data.xml 文件 。 你 需要 
选中 Download and import file attachments 选项 ， 但 无 须 重新 设置 博客 文章 的 
作者 ,有 关 测 试 WordPress 主题 的 更 多 信息 , 可 以 访问 https://codex.wordpress.org/ 
Theme Unit Test. 


最 终 的 结果 会 如 下 图 所 示 。 
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JBST 是 一 个 适合 快速 上 手 的 主题 , 而 不 是 框架 。WordPress 中 则 提供 了 用 于 创建 子 主题 的 结 
构 ， 这 种 子 主题 设计 可 以 有 效 简化 父 主 题 的 升级 操作 。 JBST4 主题 旨 在 让 用 户 快速 上 手 ， 而 不 是 
用 作 父 主题 或 框架 。 基 本 上 ， 对 JBST4 主题 的 使 用 就 像 本 章 所 讲 的 ， 修 改定 制 后 直接 拿 来 用 
即 可 。 


可 以 用 Bower 来 进行 管理 ， 确 保 编写 的 Bootstrap 代码 及 其 依赖 不 过 时 。 
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4.18 M GitHub 上 下 载 


可 以 从 GitHub 上 下 载 本 章 定制 主题 的 最 新 版 本 。 下 载 地 址 为 : https://github.com/bassjobsen/ 
jbst-weblog-theme。 


4.19 ”小 结 


在 本 章 中 , 可 以 看 到 , 使 用 WordPress 的 Bootstrap 主题 , 将 WordPress 的 HTML 转换 成 标准 
的 Bootstrap 代码 ， 我 们 可 以 轻松 地 复 用 第 3 章 中 的 SCSS 内 容 。 这 些 SCSS 内 容 和 JBST 主题 都 
尽 可 能 使 用 和 复 用 Bootstrap 中 预定 义 的 那些 CSS 类 。 这 一 策略 使 我 们 能 够 编写 出 清晰 而 又 易于 
复 用 的 代码 。 


本 章 中 用 Bootstrap 创建 了 一 个 定制 的 WordPress 主题 。 由 于 我 们 选择 了 基于 JBSTA 这 一 优 
秀 的 主题 进行 开发 ， 因 此 无 须 从 零 开始 构造 。 通 过 定制 和 创建 模板 文件 ,我 们 实现 了 对 标记 结构 
的 控制 。 之 后 ， 则 用 Bootstrap 中 的 样式 调整 按钮 和 评论 的 样式 。 


最 后 ， 我 们 使 用 了 Bootstrap 中 的 传送 带 组 件 ， 在 首页 上 增加 了 图 片 幻 灯 效果 。 同 时 ， 还 在 
主题 中 加 入 了 滑 入 式 菜 单 和 网 格 砌 体 布局 。 


祝贺 你 ! 这 是 相当 了 不 起 的 成 就 。 
本 章 所 涉及 的 操作 过 程 可 以 将 任意 一 个 基于 Bootstrap 的 设计 转换 为 WordPress 主题 。 


所 以 ， 接 下 来 我 们 将 重新 介绍 有 关 Bootstrap 网 页 设计 方面 的 内 容 。 在 下 一 章 中 ， 我 们 将 设 
计 一 个 作品 展示 站 点 。 









































TES RE s ea 











假设 我 们 已 经 想 好 了 要 给 自己 的 作品 做 一 个 在 线 站 点 。 一 如 既往 , 时 间 紧 迫 。 我 们 需要 高 效 ， 
而 且 作 品 展 示 效 果 必 须 专业 。 当 然 ， 站点 还 得 是 响应 式 的 ,能够 在 各 种 设备 上 正常 浏览 ， 因 为 这 
是 我 们 向 目标 客户 推销 时 的 卖点 。 这 个 项 目 可 以 利用 Bootstrap 的 很 多 内 置 特性 ， 同 时 也 将 根据 


需要 定制 Bootstrap。 








5.1 设计 目标 
我 们 已 经 草拟 了 两 个 主页 的 效果 图 。 虽 然 对 大 屏幕 中 的 展示 效果 已 经 胸 有 成 俐 , 但 我 们 还 是 
应 该 从 手持 设备 屏幕 开始 ， 迫 使 自己 聚焦 关键 要 素 。 
这 个 作品 展示 站 点 应 该 具有 下 列 功 能 : 
口 带 1ogo 的 可 折 著 的 响应 式 导 航 条 ; 


口 重点 展示 4 张 作 品 的 图 片 传 送 带 ; 

a 单 栏 布局 中 包含 3 块 内 容 ， 每 块 内 容 中 都 包含 标题 、 短 段落 和 吸引 人 点 击 阅读 的 大 尺寸 
按钮 ; 

口 包含 社交 媒体 链接 的 页 脚 。 


设计 方案 如 下 图 所 示 。 
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Bootsiroppin’ 





Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut 
porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis 
elit iaculis tincidunt. Donec at ultrices est. 


Recent Updates 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut 
porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis 
elit iaculis tincidunt. Donec at ultrices est. 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut 
porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis 
elit iaculis tincidunt. Donec at ultrices est. 


Bootstrappin' 











总 的 来 看 ,这 将 是 对 我 们 工作 成 果 的 完美 展示 。 图片 传送 带 足 够 高 ,可 以 充分 容纳 我 们 的 作 
品 展示 图 片 。 当 然 ， 导 航 到 底下 的 内 容 也 不 难 ， 用 户 可 以 先 浏览 每 一 项 的 大 致 情况 ， 然 后 决定 深 
入 阅读 哪 块 内 容 。 通 过 把 重要 的 链接 做 成 大 尺寸 按钮 ， 我 们 从 视觉 层级 上 突出 了 重要 的 操作 项 ， 
确保 即使 手指 粗大 的 用 户 都 可 以 轻易 点 触 


为 了 便于 维护 ,我 们 决定 只 考虑 两 个 主要 的 断 点 。 在 窄 于 768 像素 的 小 屏幕 中 使 用 单 栏 布局 ， 
否则 就 切换 到 一 个 三 栏 布 局 。 
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Booistrappin’ — «Home 加 poolio Team  & Contact 





Welcome! Recent Updates Our Team 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. 

Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed 

fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit 

laculis tincidunt. Donec at ultrices est. laculis tincidunt. Donec at ultrices est. laculis tincidunt. Donec at ultrices est. 
Bootstroppin 











在 这 个 针对 平板 电脑 等 大 屏幕 的 设计 效果 图 中 ， 可 以 发 现下 列 功能 


O 位 于 顶部 的 导航 条 ， 而 且 各 导航 项 都 附带 图 标 ; 

O 宽屏 版 的 主页 图 片 传 送 带 ， 其 中 的 图 片 拉 伸 至 与 浏览 带 窗 口 同 宽 ; 
口 三 栏 布局 分 别 容纳 三 块 文本 内 容 ; 

口 包含 内 容 的 页 脚 水 平 居中 。 

这 个 设计 的 配色 很 简单 ， 只 有 灰 阶 以 及 用 于 链接 和 突出 显示 的 金 绿色 。 


明确 了 设计 目标 ， 接 下 来 就 可 以 布置 内 容 了 。 


5.2 ”查看 练习 文件 


我 们 来 看 看 这 个 练习 用 的 文件 。 如 第 1 章 所 描述 的 ， 用 Bootstrap CL 创建 一 个 新 项 目 。 
可 以 运行 以 下 命令 ， 安 装 Bootstrap CLI: 


npm install -g bootstrap-cli 


然后 即 可 通过 以 下 命令 新 建 项 目 : 


bootstrap new 












































与 之 前 一 样 ， 选 择 创 建新 的 空白 的 Bootstrap 项 目 ， 创 建 过 程 中 选择 Panini, Sass 和 Gulpo 
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项 目 创建 后 ， 文 件 结构 与 第 1 章 中 的 模板 文件 夹 差不多 。 


DS 


PN 





后 ， 执 行 以 下 操作 。 








口 创建 assets/images 文件 夹 。 
口 将 img 文件 夹 中 的 文件 复制 到 刚 创 建 的 assets/images 目录 中 ， 具 体 包括 5 张 图 片 : 


m 名 为 logo.png 的 logo 图 标 ; 


4 张 作 品 展 示 图 片 。 








assets 
bower components 
bower.json 
etc 
Gulpfile.js 
html 

node modules 
package. json 
README . md 
scss 

site 








口 在 Gulpfile.js 文件 中 添加 以 下 新 任务 : 


// 复制 资源 


gulp.task('copy', function() { 


1); 


口 最 后 ,将 该 新 任务 添加 到 Gulp 的 默认 任务 中 : 


gulp.task('build', 


['clean','copy','compile-js' 


包含 Panini 模板 的 html 目录 的 文件 结构 如 下 。 








| 一 includes 
carousel.html 
footer.html 
footerjavascripts.html 
header .html 

| 一 layouts 

L— default.html 

L— pages 

L— index.html 














gulp.src(['assets/**/*']).pipe(gulp.dest(' site')); 


,'compile-sass','compile-html']); 


可 以 访问 https://github.com/zurb/panini, WEZA X: Panini 的 知识 。 


以 下 是 以 上 截 




















图 中 所 涉及 文件 的 一 些 详细 信息 。 


口 html/pages/index.html 文件 中 包含 了 以 下 HTML 和 模板 代码 。 


m 包含 传送 带 (includes/carousel.html ) HJ {{> carousel}} 片 段 。 


m 内 容 块 ， 如 下 所 示 : 
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<h2>Welcome!</h2> 
<p>Suspendisse et a..... </p> 
<p><a href="#">See our portfolio</a></p> 


口 在 layouts/default.html 中 所 引入 的 includes/header.html 文件 会 包含 导航 条 组 件 ， 其 特殊 之 
处 在 于 : 


m 导航 条 中 的 项 目 已 更 新 ， 以 适 配 新 的 站 点 架构 需求 : 


«header role="banner"> 

«nav class-"navbar navbar-light bg-faded" role="navigation"> 

«a class-"navbar-brand" href-"index.html"»Bootstrappin'«/a» 

«button class-"navbar-toggler hidden-md-up pull-xs-right" 
type="button" data-toggle-"collapse" data-target-"tcollapsiblecontent"-» 





«/button» 
«ul class-"nav navbar-nav navbar-toggleable-sm collapse" 
id-e"collapsiblecontent"'-» 

«li class-"nav-item"-» 

«a class-"nav-link active" href="#">Home «span class-"sr-only"» 

(current)«/span»«/a» 

epe 

«li class-"nav-item"-» 

«a class-"nav-link" href="#">Portfolio</a> 
</li> 
<li class="nav-item"> 

«a class-"nav-link" href="#">Team</a> 
«/li» 
«li class-"nav-item"-» 

«a class-"nav-link" href="#">Contact</a> 
</li> 

</ul> 
</nav> 
</header> 


口 在 layouts/default.html 中 所 引入 的 includes/footerhtml 文件 会 包含 以 下 内 容 : 


页 脚 中 的 logo 图 标 ; 
m 社交 媒体 链接 : 


<footer role="contentinfo"> 
<p><a href="{{root}}index.html"><img 
src="{{root}}images/logo.png" 
width="80" alt="Bootstrappin'"></a></p> 
«ul class="social"> 
<li><a href="#" >Twitter</a></1i> 
«li»«a href="#" >Facebook</a></1i> 
<li><a href="#" >LinkedIn</a></li> 
<li><a href="#" >Google+</a></li> 
<li><a href="#" >GitHub</a></li> 
</ul> 
</footer> 


与 第 1 章 中 的 导航 条 不 同 ， 此 时 的 传送 带 、 分 栏 和 图 标 都 没有 添加 Bootstrap 类 。 
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本 章 稍 后 将 会 介绍 如 何 用 Sass 来 定制 此 项 目 。 就 目前 而 言 , 可 以 看 到 app.scss 主 文件 会 引入 
includes/_navbar.scss 文件 。 如 第 1 章 所 展示 的 那样 ， 该 文件 中 的 SCSS 代码 会 在 小 型 屏幕 中 移 除 
导航 链接 项 目的 浮动 属性 。 


除了 以 上 做 法 , 也 可 以 直接 使 用 本 书 附带 的 chapter5/start 文件 夹 中 的 文件 。 可 以 在 该 文件 夹 
中 运行 npm install FI bower install 命令 ， 然后 运行 bootstrap watch 或 者 gulp 命令 


后 在 浏览 大 中 查看 结果 。 
可 以 看 到 ， 页 面 中 将 显示 导航 条 ， 并 在 其 下 方 显示 作品 展示 图 片 。 





























Company 
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作品 图 片 后 面 就 是 文本 块 和 包含 一 组 社交 链接 的 页 脚 。 





Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
leget. In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


ISee our portfolio 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
leget. In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


ISee what's new! 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
leget. In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


Meet the team! 


Bootstrappin 


* Twitter 

* Facebook 
* Linkedin 
* Google+ 
* GitHub 











无 须 多 言 。 还 是 让 它 开始 变 身 吧 ! 


我 们 从 添加 Bootstrap 类 着 手 ， 这 样 可 以 利用 Bootstrap 默认 的 CSS 样式 和 JavaScript 行 为 ， 
迅速 高 效 地 搭建 起 基本 的 界面 元 素 。 


5.3 ”搭建 传送 带 
下 面 先 来 措 建 传送 带 ， 传 送 带 会 循环 展示 我 们 作品 的 4 张 特写 图 片 。 


Bootstrap 传送 带 的 标记 结构 可 以 在 其 文档 页 面 找到 ，URL 为 https://getbootstrap.com/docs/ 
4.3/components/carousel/。 


可 以 按照 示例 中 的 结构 设置 基本 的 元 素 。 以 下 代码 包含 传送 带 的 所 有 部 分 ， 首 先是 进度 指 
ZR 


«div id-"carousel-feature" class="carousel slide" data-ride-"carousel"'- 
«ol class-"carousel-indicators"» 
«li data-target-"£carousel-feature" data-slide-to-"0" class-"active"»«/li» 
«li data-target-"fHscarousel-feature" data-slide-to-"1"»«/li» 
«li data-target-"fHicarousel-feature" data-slide-to-"2"»«/li» 
«/ol» 
«/div» 


整个 传送 带 是 一 个 








属性 (id="carousel-feature" ) 的 aiv 标签 ,其 carousel 类 





di 
c 
已 
TH 
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用 于 把 Bootstrap 的 传送 带 CSS 应 用 到 这 个 元 素 ， 为 传送 带 指示 器 、 传 送 带 项 和 前 一 张 及 后 一 张 
控件 添加 样式 。 


进度 指示 器 的 aata-target 属性 必须 使 用 传送 带 的 ID carousel-feature。 有 了 这 个 属 
TE, JavaScript 插件 才能 为 活动 的 传送 带 项 添加 active 类 。 在 此 ， 我 们 预先 为 第 一 个 指示 器 添 
加 了 active 类 。 然 后 ， 类 的 切换 就 由 JavaScript 控制 了 。 它 会 删除 第 一 个 指示 器 的 这 个 类 ， 再 
添加 到 后 续 指 示 器 ， 如 此 循环 。 


此 外 ,还 要 注意 data-slide-to 的 值 从 0 开始 , 与 JavaScript 和 其 他 编程 语言 一 样 。 记 住 : 
从 0 开始 ,不 是 从 1 开始 。 


指示 咒 后 面 ， 是 类 为 carousel-inner 的 元 素 。 这 个 元 素 用 以 封装 所 有 传送 带 项 ， 在 本 例 
中 也 就 是 所 有 图 片 。 













































































carousel-inner 元 素 内 部 是 传送 带 项 ， 是 一 组 aiv 标签 ， 每 个 都 带 着 class="item"。 
把 第 一 项 修改 成 包含 item 和 active 两 个 类 ， 使 其 一 开始 就 可 见 。 


此 时 的 标记 结构 如 下 所 示 : 
<!-- 封装 幻灯 片 --> 








«div class-"carousel-inner" role-"listbox"-» 
«div class-"carousel-item active"-» 
«img src-"((root))images/projectil.png" alt-"Streetart.com Homepage" 
</div> 
<div class="carousel-item"> 
«img src="{{root}}images/project2.png" alt="Your bussiness"> 
</div> 
<div class="carousel-item"> 
«img src="{{root}}images/project3.png" alt="Your blog"> 
«/div» 
«div class-"carousel-item"- 
«img src-"((root))images/project4.png" alt-"Menstrualcups.eu Homepage"- 
«/div» 
«/div»«!-- /.carousel-inner --> 


传送 带 项 之 后 ， 还 需要 添加 传送 带 控 件 ， 用 于 在 传送 带 左 右 两 侧 显 示 前 一 个 和 后 一 个 按钮 。 
在 控件 后 面 ， 我 们 再 用 一 个 结束 aiv 标签 关闭 整个 标记 结构 。 


«1-- .控件 - -==3 
«a class="left carousel-control" href="#carousel-feature" role="button" 
data-slide="prev"> 
«span class-"icon-prev" aria-hidden="true"></span> 
«span class-"sr-only"»Previous«/span-» 
</a> 
«a class="right carousel-control" href="#carousel-feature" role="button" 
data-slide="next"> 
<span class="icon-next" aria-hidden="true"></span> 









































5.3 ”搭建 传送 带 131 





«span class-"sr-only"»Next«/span» 
c«/a» 
«/div»«!-- /tfhomepage-feature.carousel --» 
每 个 传送 带 控 件 (carousel-controls ) 的 href 属性 必须 是 最 外 围 传送 带 元 素 
W ID 16 ( #carousel-feature )。 代 码 示 例如 下 : «aclass-"left carousel- 
&5 control" href-"icarousel-feature" role="button" data-slide-"prev"»,; 





至 此 , 你 可 以 编写 图 片 传 送 带 相关 的 完整 的 代码 ,编写 完成 后 , 如 果 bootstrap 
watch 命令 尚未 运行 ， 则 可 以 运行 gulp 命令 ,观察 生效 的 Bootstrap 样式 与 
JavaScript 行 为 。 浏 览 器 中 应 当 能 幻灯 式 地 显示 所 设 定 的 图 片 。 


请 注意 ,传送 华 组 件 依 赖 jQuery 和 相关 的 JavaScript 插件 。 而 在 Gulp 的 构建 流程 中 ,jQuery 
和 所 有 的 插件 都 会 被 合并 打包 到 一 个 名 为 appjjs 的 文件 中 。 


默认 情况 下 , 传送带 的 幻灯 片 每 5 秒 切换 一 次 。 为 了 让 你 充分 欣赏 我 们 的 作品 ， 可 以 将 间隔 
BUR 8 Tb, 
(1) 创建 一 个 名 为 js/main.js 的 新 文件 。 


(2) 添加 以 下 代码 。 这 里 先 用 jQuery 方法 检测 相应 的 页 面 元 素 是 否 存 在 ， 如 果 存 在 则 将 传送 
带 的 间隔 时 间 初 始 化 为 8000 毫秒 。 


$( document ).ready(function() ( 
$('.carousel').carousel(( 
interval: 8000 
piz 
iE 


(3) 请 注意 ,需要 在 构建 时 自动 将 js/main.js 文件 从 assets 目录 复制 到 目标 文件 夹 , 并 在 HTML 
中 进行 引用 。 或 者 ， 也 可 将 其 添加 到 Gulpfilejs 文件 中 的 compile-js 任务 里 : 


gulp.task('compile-js', function() ( 
return gulp.src([bowerpath- 
'jguery/dist/jquery.min.js', bowerpath« 
'tether/dist/js/tether.min.js', bowerpath- 
'bootstrap/dist/js/bootstrap.min.js','js/main.js']) 
.pipe(concat('app.js')) 
.pipe(gulp.dest('./ site/js/')); 

)); 


qp 除 此 之 外 , 还 应 当 od n 文件 添加 到 Gulp 的 watch 任务 中 。 有 关 Gulp 























(4) 保存 并 刷新 应 用 。 你 会 看 到 间隔 时 间 增 加 到 了 8 秒 。 


除了 这 种 通过 JavaScript 语句 所 进行 的 调整 外 ， 也 可 以 用 aata-* 属 性 的 方式 来 达到 相同 的 
效果 。 可 用 data-interval 属性 来 改变 传送 带 的 间隔 时 间 : 
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«div id-"carousel-feature" class="carousel slide" data-ride-"carousel" 
data-interval-"8000"» 


相关 的 选项 可 以 参考 Bootstrap 传送 带 的 文档 : http://getbootstrap.com/javascript/Zcarousel o 


关于 定制 传送 带 及 其 指示 器 和 图 标的 样式 ， 本 章 后 面 再 讨论 。 我 们 接 下 来 继续 看 如 何 利用 
JavaScript 4l CSS ( SCSS ) 改变 传送 带 的 具体 行为 。 


传送 带 工作 机 制 | 


jQuery 插件 会 修改 传送 带 项 的 CSS 类 。 当 页 面 加 载 完 毕 后 ,第 一 个 项 拥有 active 类 。 而 当 
设 定 的 间隔 时 间 过 去 后 ,插件 就 会 将 active 类 移 到 第 2 个 项 上 ,依次 类 推 。 除 了 更 改 拥 有 active 
类 的 元 素 的 位 置 ， 插 件 还 会 临时 添加 next 和 left 类 。 这 些 动态 添加 的 CSS 类 与 CSS3 动画 效 
果 一 起 ， 即 可 创建 出 幻灯 效果 。 可 以 访问 以 下 网 址 ， 了 解 更 多 有 关 CSS3 动画 的 内 容 : 


https://developer.mozilla.org/en-US/docs/Web/CSS/CSS Animations/Using CSS animations 


在 carousel-inner 类 上 ,插件 会 设置 以 下 transition 属性 : 

transition: transform .6s ease-in-out; 

在 该 样式 声明 中 ，ease-in-out 值 会 设置 动画 的 变换 时 间隙 数 ( 过 渡 效 果 )。 可 以 访问 
https://developer.mozilla.org/en/docs/Web/CSS/transition-timing-function， 了 人 解 更 多 相关 信息 。 基 本 
上 ， 该 函数 值 会 表示 整个 动画 在 执行 期 间 所 呈现 出 来 的 变换 速度 曲线 。 之 后 我 们 还 会 介绍 用 
keyframe 来 描述 动画 变换 效果 的 方法 。 

EX CSS 动画 样式 中 所 涉及 的 变换 操作 为 translate3d。 相 关 的 CSS 函数 translate3d() 
会 在 3D 空间 内 转换 元 素 的 位 置 。 可 以 访问 https://developer.mozilla.org/en-US/docs/Web/CSS/ 
transform-function/translate3d， 了 解 更 多 相关 的 信息 。 如 以 下 代码 所 示 ， 传 送 带 会 按 X 轴 方 向 移 
动 传送 带 项 : 


&.next, 
&.active.right ( 

left: 0; 

transform: translate3d(100$, 0, 0); 
} 


1. 添加 新 的 动画 效果 以 改变 传送 带 

如 替换 上 一 节 中 所 使 用 的 Css 动画 ， 即 可 创建 出 新 的 幻灯 轮 播 效果 。 

可 以 在 自己 的 项 目 中 使 用 Daniel Ede 所 编写 的 Animate.css， 引 入 各 种 CSS 动画 效果 。 我 们 
之 前 创建 的 传送 带 项 目 也 不 例外 。 该 类 库 的 官方 网 址 为 http://daneden.github.io/animate.css/。 

由 于 我 们 在 构建 流程 中 使 用 了 autoprefixer， 因 此 在 通过 SCSS 代码 编写 新 的 动画 效果 时 ,可 
以 不 考虑 浏览 器 引 敬 前缀 方面 的 因素 。 在 本 例 中 , 我 们 将 使 用 Animate .css 类 库 中 的 £1ipinx 
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该 效果 会 沿 X 轴 翻转 图 片 。 


在 scss/includes/ carousel.scss 文件 的 末尾 添加 以 下 SCSS 代码 : 


@keyframes flipInX { 


} 


from { 
transform: perspective(400px) rotate3d(1, 
animation-timing-function: ease-in; 
opacity: 0; 




















} 

40% { 
transform: perspective(400px) rotate3d(1, 
animation-timing-function: ease-in; 

} 

60% { 
transform: perspective(400px) rotate3d(1, 
opacity: 1; 

} 

80% { 
transform: perspective(400px) rotate3d(1, 

) 

to { 
transform: perspective(400px); 

} 

.flipInX { 


} 


backface-visibility: visible !important; 
animation-name: flipInX; 


.carousel-inner { 


position: relative; 
width: 100$; 
overflow: hidden; 


> .carousel-item { 
position: relative; 
display: none; 
transition: none; 
backface-visibility: visible !important; 
animation-name: flipInX; 
animation-duration: 0.6s; 


// Account for jankitude on images 
» img, 
» a» img ( 
Gextend .img-fluid; 
line-height: 1; 
} 


.active, 

.next, 

.prev { 
display: block; 


WONS Wm 


> .active { 
top: 0; 


0, 


0, 


90deg); 








> next, 

> .prev ( 
position: absolute; 
left: 0; 
width: 100$; 

j 

» .next ( 
top: 100$; 

j 

> .prev ( 
top: -100$; 

j 


» .next.left, 
» .prev.right ( 





top: 0; 

j 

» .active.left ( 
top: -100$; 

j 

» .active.right ( 
top: 100$; 

j 


} 
Gkeyframes flipInX { 
from ( 
transform: perspective(400px) rotate3d(1, 




















animation-timing-function: ease-in; 
opacity: 0; 
} 
40% { 
transform: perspective (400px) rotate3d(1, 
animation-timing-function: ease-in; 
} 
60% { 
transform: perspective (400px) rotate3d(1, 
opacity: 1; 
j 
80$ ( 
transform: perspective(400px) rotate3d(1, 
j 
tu d 
transform: perspective(400px); 
j 
j 
.flipInX ( 


backface-visibility: visible !important; 
animation-name: flipInX; 
j 
.carousel-inner { 
position: relative; 
width: 100$; 
overflow: hidden; 


> .carousel-item ( 
position: relative; 
display: none; 
transition: none; 


90deg); 


-208eg); 


10deg); 


-5deg); 
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backface-visibility: visible !important; 
animation-name: flipInX; 
animation-duration: 0.6s; 
// Account for jankitude on images 
» img, 
» a» img ( 
Gextend .img-fluid; 
line-height: 1; 
) 


.active, 

next, 

.prev ( 
display: block; 


V VV o 


» .active ( 
top: 0; 


» .next, 

> .prev ( 
position: absolute; 
left: 0; 
width: 1003; 


> .next ( 
top: 100$; 


> .prev ( 
top: -100$; 





» .next.left, 
> .prev.right ( 
top: 0; 


» .active.left ( 
top: -100$; 


» .active.right ( 
top: 100$; 





} 
运行 bootstrap watch 或 gulp 命令 后 ， 即 可 在 浏览 右 中 看 到 图 片 沿 轴 翻转 的 效果 。 
2. 传送 带 插件 中 的 JavaScript 事件 


对 于 大 多 数 插件 中 特有 的 交互 行为 , Bootstrap 都 提供 了 相关 的 定制 事件 。 传送 带 插件 会 在 纪 
灯 变 换 效果 开始 时 触发 slide.bs.carousel 事件 ， 并 在 变换 效果 结束 时 触发 slid.bs. 
carousel 事件 。 可 以 利用 这 些 事件 添加 定制 的 JavaScript 代码。 比如 ， 通 过 在 js/main.js 文件 中 
添加 以 下 JavaScript 代码 ， 当 相关 事件 发 生 时 更 改 整个 页 面 的 背景 色 : 

$('.carousel').on('slide.bs.carousel', function () ( 


$('body').css('background-color',' '4'«(Math.random()*OxFFFFFF««0).toString(16)); 
)); 








iini 





iini 
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请 注意 ， 由 于 之 前 的 gulp watch 任务 中 并 未 包含 此 js/main.js 文件 ， 因 此 你 需要 手动 运行 
gulp 3X bootstrap watch 命令 来 让 此 修改 生效 。 


如 需 对 插件 行为 做 更 复杂 的 更 改 ， 则 可 以 用 代码 覆 写 插件 中 所 涉及 的 方法 ， 如 : 


!function($) { 
var number = 0; 
var tmp = $.fn.carousel.Constructor.prototype.cycle; 
$.fn.carousel.Constructor.prototype.cycle = function (relatedTarget) ( 
// 在 此 处 定制 JavaScript 代码 
number = (number $ 4) + 1; 
$('body').css('transform','rotate('« number * 90 -«'deg)'); 
tmp.call(this); // 调用 原始 函数 
Jz 








) (jQuery); 


值得 注意 的 是 ， 上 述 代 码 中 所 设置 的 transform 属性 不 涉及 浏览 器 引 苟 前 级 。 由 于 
autoprefixer 机 制 仅 对 静态 的 CSS 代码 有 效 ， 出 于 浏览 器 兼容 性 上 的 考虑 ， 开 发 者 需 在 JavaScript 
代码 中 自行 添加 浏览 器 引擎 前 级 。 






































Bootstrap 中 大 量 使 用 了 CSS3 来 实现 动画 效果 ,不 过 IE9 不 支持 相关 的 CSS 属性。 





接 下 来 ， 我 们 将 借助 Bootstrap 中 的 默认 样式 ， 在 传送 带 下 方 创建 响应 式 的 内 容 网 格 。 


5.4 创建 响应 式 分 栏 


页 面 中 有 三 块 文本 ， 每 块 都 有 标题 、 短 段落 和 链接 。 在 大 于 等 于 平板 电脑 的 屏幕 上 , RTA 
望 内 容 分 三 栏 ， 而 在 较 罕 的 屏幕 上 ， 我 们 希望 内 容 变 成 一 栏 全 宽 。 


建议 大 家 花 点 时 间 熟 悉 一 下 Bootstrap 移动 优先 的 响应 式 网 格 ,文档 地 址 是 :http:/getbootstrap. 
com/css/#grido 


简单 地 说 ，Bootstrap 内 置 12 栏 网 格 系统 ， 其 基本 的 类 结构 支持 col-12 表示 全 宽 ，col1-6 
表示 半 宽 ，col-4 表示 三 分 之 一 宽 ， 以 此 类 推 。 


由 于 创造 性 地 使 用 了 媒体 查询 ， 网 格 系统 对 不 同 的 屏幕 尺寸 具有 极 强 的 适应 力 。 如 前 所 述 ， 
我 们 希望 欢迎 消息 在 平板 尺寸 的 屏幕 中 呈现 为 一 栏 布局 , 而 在 大 约 768 像素 时 变 成 三 栏 布局 。 巧 合 
的 是 ，Bootstrap 内 置 的 默认 屏幕 断 点 恰好 是 768 像素 ， 也 就 是 Sass 变量 sgriq-preakpoints 的 
默认 值 。 而 大 于 768 像素 的 大 屏幕 断 点 是 992 像素 ， 该 值 也 被 定义 在 Sass 变量 Sgrid-breakpoints 
中 。 然 后 ， 大 于 1200 像素 断 点 的 为 超大 屏幕 。 
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中 型 断 点 有 一 个 特殊 的 栏 类 命名 法 : col-mdq-。 因 为 我 们 想 在 小 型 断 点 之 后 使 用 三 栏 ， 所 以 
这 里 使 用 class="col-md-4"。 在 中 型 断 点 之 下 ， 分 块 元 素 会 保持 全 宽 ， 而 在 该 种 断 点 之 上 ， 
则 会 各 占 三 分 之 一 宽 并 肩 排列 。 请 注意 , 在 768 像素 宽度 的 窗口 环境 下 , 导航 条 也 会 被 收缩 显示 。 
完整 的 结构 如 下 所 示 ， 为 简明 起 见 ， 段 落 内 容 做 了 省 略 处 理 : 


«div class-"container"» 
«div class="row"> 
«div class-"col-sm-4"» 
«h2»Welcome!«/h2» 








«p»Suspendisse et arcu felis ...«/p» 
<p><a href="#">See our portfolio«/a»«/p» 
</div> 


<div class="col-sm-4"> 
<h2>Recent Updates</h2> 


<p>Suspendisse et arcu felis ...«/p» 
«p»«a href="#">See what's new!«/a»«/p» 
</div> 


<div class="col-sm-4"> 
<h2>0ur Team</h2> 


<p>Suspendisse et arcu felis ...</p> 
<p><a href="#">Meet the team!</a></p> 
</div> 
«/div»«!-- J row ==> 
</div><!-- /.container --> 





ep 可 在 html/pages/index.html 文件 中 修改 上 述 代 码 。 


下 面 解 释 一 下 container 和 row 类 的 作用 : 


O container 类 用 于 约束 内 容 的 宽度 ， 并 使 其 在 页 面 内 居中 ; 
row 类 用 于 封装 三 个 栏 ， 并 留 出 栏 间 的 左右 外 边 距 ; 


O container 类 和 row 类 都 设 定 了 清除 ， 因 而 它们 可 以 包含 浮动 元 素 , 同时 又 清除 之 前 的 
浮动 元 素 。 











现在 ,保存 文件 并 运行 bootstrap watch 或 gulp 命令。 在 浏览 器 窗口 宽度 超过 768 像素 
时 ， 应 该 看 到 下 图 所 示 的 三 栏 布局 。 





Welcome! Recent Updates Our Team 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. iaculis tincidunt. Donec at ultrices est. iaculis tincidunt. Donec at ultrices est. 

















把 窗口 缩小 到 768 像素 以 下 ， 又 会 看 到 三 栏 变 成 了 一 栏 。 
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Welcomel 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


Our Team 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 











好 ， 这 样 就 利用 响应 式 网 格 系统 完成 了 响应 式 分 栏 ， 接 下 来 我 们 要 利用 Bootstrap 的 按钮 样 
式 ， 把 内 容 分 块 中 的 链接 做 成 突出 的 效果 。 














5.5 把 链接 变 成 按钮 
把 重要 的 内 容 链接 转换 成 突出 显示 的 按钮 很 简单 。 为 此 要 用 到 如 下 几 个 关键 的 类 。 

口 btn 类 用 于 把 链接 变 成 按钮 的 样式 。 

O btn-primary 类 用 于 把 按钮 变 成 主 品牌 颜色 。 

口 pull-xs-right 类 用 于 把 链接 浮动 到 右 侧 , 使 其 在 更 大 的 空间 内 移动 ， 从 而 更 便于 发 现 
和 点 击 。 其 中 ，xs 意味 着 该 规则 对 所 有 宽度 大 于 超 小 型 断 点 CO 像素 ) 的 窗口 ， 也 就 是 
所 有 宽度 的 视 口 均 有 效 。 相 应 的 ，pull-md-right 类 则 仅 对 宽度 大 于 768 像素 视 口 环境 
下 的 元 素 设置 浮动 。 

把 上 述 这 几 个 类 添加 到 三 个 内 容 块 末尾 的 链接 上 : 


<p><a class="btn btn-primary pull-xs-right" href="#">See our portfolio</a></p> 


保存 文件 ， 应 该 能 够 看 到 类 似 下 图 所 示 的 结果 。 
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Welcomel 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus 
ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus 
ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus 
ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at 


ultrices est. 
Meet the team! 


我 们 又 前 进 了 一 大 步 。 关 键 的 内 容 元 素 已 经 基本 成 型 了 。 


在 基本 的 标记 结构 就 位 的 前 提 下 ，, 接 下 来 可 以 进行 微调 了 。 为 此 需要 用 到 定制 的 CSS, 而 我 
们 要 借助 威力 强大 的 Bootstrap 的 Sass 文件 ,不 熟悉 Sass 也 不 必 担 心 , 我 会 一 步 一 步 教 你 怎么 做 ， 
你 也 可 回顾 第 3 章 的 内 容 。 























5.6 理解 Sass 


本 节 我 们 会 学 习 组 织 、 编 辑 、 定 制 和 创建 一 些 SCSS 文件 ， 以 便 为 我 们 的 设计 生成 期 望 的 
CSS, 

















如 果 你 不 太 了 解 Sass ,并 希望 进一步 学 习 ,建议 阅读 本 书 作者 的 另 一 本 书 Sass and 
Compass Designer s Cookbook， 或 者 阅读 官方 文档 https://www.sass-lang.com。 





简 言 之 ， 使 用 Sass 预 处 理 需 来 生成 CSS 是 一 件 既 愉悦 又 轻松 的 事 。 接 下 来 我 们 就 具体 讨论 
使 用 Sass 的 主要 优势 。 


5.7 根据 需要 定制 Bootstrap 的 Sass 文件 
在 定制 Bootstrap 的 Sass 文件 期 间 ， 我 们 会 发 挥 很 大 的 主观 能 动 性 ， 具 体 如 下 : 
O 组 织 sess 文件 夹 ， 以 便 灵活 、 自 由 地 实现 我 们 需要 ， 同 时 也 让 将 来 的 维护 更 方便 ; 


口 定制 Bootstrap 提供 的 Sass 变量 ; 
口 创建 几 个 定制 的 Sass 文件 ; 
a 为 站 点 整合 一 套 字 体 图 标 ， 并 将 图 标 运 用 于 社交 媒体 链接 。 


换 句 话说 ， 我 们 不 光 是 要 学 习 应 用 Bootstrap 的 约定 ， 还 要 发 挥 自己 的 创造 力 。 
在 本 章 的 练习 文件 中 ,打开 sess 目录 。 打 开 后 ， 可 以 看 到 下 图 所 示 的 目录 结构 。 




















E: app.scss 

includes 
 backgrounds.scss 
 bootstrap.scss 
 carousel.scss 
.footer.scss 
mixins 
L— size.scss 
 mixins.scss 
navbar.scss 








| page-contents.scss 
 variables.scss 








为 方便 起 见 ， 先 解释 一 下 组 织 的 新 层级 。 我 已 经 把 Bootstrap 的 Sass 文件 提前 集中 保存 到 了 
bower_components/bootstrap/scss/ 文 件 夹 下 面 。 你 可 以 如 接 下 来 的 章节 中 所 描述 的 那样 复 用 这 些 文 
件 ， 但 不 应 直接 对 其 进行 修改 。 保 持原 始 的 Bootstrap 文件 不 变 ， 可 以 让 我 们 在 保留 自己 的 代码 
修改 的 情况 下 ， 方 便 升级 Bootstrap。 


首先 ，app.scss 文件 会 引入 两 个 局 部 文件 : 


Gimport "includes/variables"; 
Gimport "includes/bootstrap"; 


























文件 include/ bootstrap.scss 是 bootstrap.scss 文件 的 修改 版 ， 它 引入 了 其 他 所 有 的 Bootstrap 
文件 , 将 来 就 是 通过 编译 所 有 引入 的 Sass 文件 来 生成 一 个 统一 的 样式 表 。 而 include/_variables.scss 
文件 则 是 _variables.scss 文件 的 修改 版 ， 它 包含 Bootstrap 中 所 有 Sass 变量 的 声明 。 由 于 
include/ variables.scss 文件 先 于 _variables.scss 文件 被 引入 ， 因 此 该 文件 中 定义 的 变量 会 履 写 
Bootstrap 中 的 默认 值 。 


为 什么 要 多 此 一 举 呢 ? 因为 我 们 很 快 就 要 修改 Bootstrap 中 的 默认 值 并 创建 自己 的 定制 Sass 
文件 了 。 这 样 一 来 ， 我 们 创建 的 文件 就 不 会 与 Bootstrap 内 置 的 文件 混淆 ， 便 于 调整 。 


下 面 开 始 定制 ! 先 从 定制 Bootstrap 变量 和 添加 新 变量 开始 。 






































定制 变量 
接 下 来 ， 我 们 先 复制 一 份 Bootstrap 的 变量 文件 ， 然 后 按 需要 定制 。 


(1) 找到 sess 文件 夹 中 的 includes/_variables.scss 文件 ， 在 编辑 器 中 打开 它 。 

(2) 浏览 一 下 这 个 文件 ， 会 发 现 用 以 设置 各 种 CSS 值 的 变量 ， 有 定义 基本 颜色 值 的 ， 有 定义 
页 面 背 景 颜色 的 ， 有 定义 字体 的 ， 还 有 定义 导航 条 高 度 和 背景 的 ， 等 等 。 看 起 来 很 好 ， 但 改动 一 
下 更 妙 。 改 动 之 前 , 我 们 先 另存 一 个 副本 , 保持 Bootstrap 默认 变量 完好 ,以便 以 后 想 恢复 时 使 用 。 


然后 ， 我 们 就 来 调整 配色 。 


(1) 在 新 的 ipcludes/_variables.scss 文件 的 最 开始 ， 可 以 看 到 Bootstrap 为 灰色 和 品牌 色 定 义 的 
默认 变量 及 其 值 : 






































5.7 根据 需要 定制 Bootstrap 的 Sass 文件 141 





$gray-dark: #373a3c; 
$gray: #55595c; 
$gray-light: #818a91; 
$gray-lighter: deceeef; 
$gray-lightest: #f7£7f9; 








Q) 我 们 知道 自己 想 要 的 值 ， 因 此 直接 替换 即 可 〈 你 也 可 以 尝试 一 下 使 用 计算 的 值 )。 然后 再 
增加 两 个 变量 ， 以 涵盖 我 们 需要 的 完整 灰 度 范围 。 结 果 如 下 : 











$gray-dark: 4454545; 
$gray: #777; 
$gray-light: dtaeaeae; 
$gray-lighter: #ccc; 


$gray-lightest: #ededed; 

(3) 接 下 来 再 更 新 品牌 颜色 中 的 Sbrand-primary 变量 ， 将 其 改 为 金黄 色 : 

// 品牌 颜色 

S$brand-primary: #clba62; 

(4) 如 果 已 运行 bootstrap watch (或 gulp watch) 命令 ， 则 保存 includes/_variables.scss 
文件 后 浏览 右 会 自动 刷新 ， 显示 新 的 结果 。 

若 一 切 顺利 , 链接 的 颜色 和 定义 有 btn-primary 类 的 按钮 的 颜色 将 被 设置 为 变量 sbrand- 
primary 的 值 ， 这 一 变化 最 为 引 人 注 目 。 

定制 导航 条 

下 面 ， 我 们 来 编辑 设 定 导 航 条 高 度 、 颜 色 和 悬 停 效 果 的 变量 。 

首先 设 定 高 度 。 默 认 情 况 下 ,导航 条 内 边 距 的 值 为 sspacer/2， 而 其 整体 高 度 则 由 字号 和 垂 
直方 向 的 内 边 距 所 决定 。 


在 本 地 文件 includes/_variables.scss 中 , 搜索 变量 snavbar-padding-vertical 并 用 以 下 方 
式 修改 ， 扩 大 导航 条 的 高 度 : 


$navbar-padding-vertical: $spacer; 


然后 ,设置 导航 条 的 背景 色 。html/includes/headers.html 文件 中 导航 条 的 HTML 代码 里 会 包 
含 bg-fadqed 类 。 我 们 的 目的 是 将 导航 条 的 背景 设置 为 白色 ， 因 此 只 需 将 此 CSS 类 移 除 即 可 。 
body 元 素 上 已 经 定义 好 了 白色 的 背景 色 ， 因 此 我 们 无 须 对 导航 条 背景 属性 做 重复 的 工作 。 


除 此 之 外 ， 也 可 以 用 Sass 和 Bootstrap 混入 来 创建 新 的 bg-white 类 。 创建 新 文件 scss/ 
includes/ backgrounds.scss 并 在 其 中 编写 以 下 SCSS 代码 : 





















































@include bg-variant('.bg-white', #fff); 


请 注意 ，bg-variant 混入 的 内 部 会 使 用 ! important 语句 来 声明 background-color 和 
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color 属性 。 由 于 默认 情况 下 color 属性 的 值 为 +fEfE (白色 )， 因 此 bg-variant 混入 这 一 方 
案 并 不 灵活 。 相 对 而 言 , TEscss/includes/ navbar.scss 文件 中 直接 设置 导航 条 选择 符 的 
background-color 属性 会 更 好 些 : 








.navbar ( 
background-color: #fff; 
J 


导航 条 中 的 链接 的 颜色 由 CSS 类 .navbar-light 或 .navbar-dark 所 设置 。 对 于 背景 色 为 
暗色 调 的 导航 条 来 说 , 应 当 设置 .navbar-dark 类 ; 而 对 于 背景 色 为 亮色 调 的 导航 条 来 说 , 应 当 
设置 .navbar-light 类 .htmlyincludesheaderhtml 文 件 中 导航 条 所 设置 的 是 .navbar-light 类 ， 
因此 为 了 修改 链接 的 颜色 ， 需 要 修改 includes/variables.scss 文件 中 snavbar-1ight-* 变 量 的 值 : 














$navbar-light-color: $gray; 
$navbar-light-hover-color: $link-hover-color; 
$navbar-light-active-color: $link-hover-color; 
$navbar-light-disabled-color: $gray-lighter; 


请 注意 ,我 们 之 前 修改 过 $sgray flilsSaray-lighter 变量 的 值 ， 而 $SLink-hover-color 4E 
量 的 值 则 与 spbrand-primary 相同 ， 均 为 #4c1ba62。 


如 果 想 在 链接 处 于 鼠标 县 停 或 选中 状态 时 改变 其 背景 色 ， 则 可 用 自己 喜欢 文本 编辑 器 打开 
scss/includes/ navbar.scss 文件 并 执行 以 下 步 又 : 


(1) 首先 ， 用 以 下 SCSS 代码 移 除 垂直 方向 的 内 边 距 : 


.navbar ( 
padding-top: 0; 
padding-bottom: 0; 

} 


(2) 然 后 , 在 .nav-link 选择 符 上 设置 内 边 距 , 并 在 鼠标 处 于 悬 停 或 选中 状态 时 设置 背景 色 : 


.navbar ( 

.nav-link 

{ 
padding: $spacer; 
&:hover, 
&.active ( 

background-color: $gray-lightest; 

} 














} 
} 


(3) 由 于 .navbar-brang 元 素 的 字号 较 大 ， 因 此 修正 其 内 边 距 : 


.navbar { 
.navbar-brand { 
padding: ($spacer - ((($font-size-lg - $font- 


Size-base) * $line-height) / 2)); 
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} 
} 


若 未 运行 pootstrap watch 命令 ， 现 在 运行 它 可 在 导航 条 中 观察 到 以 下 新 效果 : 
口 高 度 变 为 约 16 像素 (2 x lem ); 

口 背景 色 变 为 白色 ; 

a 导航 条 中 的 项 在 鼠标 悬 停 或 选中 状态 时 ， 其 背景 色 会 发 后 变化 ; 

口 在 鼠标 悬 停 或 选中 状态 时 ， 链 接 文本 颜色 会 设置 为 网 站 的 主 色 调 ， 如 下 所 示 。 














Home Portfolio Team Contact 











接 下 来 ， 我 们 在 网 站 上 添加 logo 图 片 。 





5.8 添加 logo 图 片 


在 assets/images 文件 夹 里 找到 logo.png 文件 。 你 会 发 现 这 个 图 片 非常 大 ， 有 900 像素 宽 。 在 
我 们 最 终 的 设计 中 ， 这 个 logo 只 有 120 像素 宽 。 因 为 多 出 来 的 像素 将 被 压缩 到 较 小 的 空间 内 ， 
所 以 这 也 是 让 图 片 在 所 有 设备 (包括 视网膜 屏 设备 ) 中 保持 清晰 的 一 种 简便 方法 。 与 此 同时 ， 这 
个 图 片 的 大 小 也 针对 Web 进行 了 优化 ， 只 有 19 KB。 s 


好 ， 下 面 我 们 就 把 它 放置 到 位 并 限制 其 宽度 。 


(1) 在 文本 编辑 器 中 打开 html/includes/header.html。 
(2) 搜索 到 导航 条 标记 中 这 一 行 代码 : 


«a class-"navbar-brand"href-"index.html"»Bootstrappin'«/a» 


(3) 把 上 述 HTML 替换 成 img 标签 ， 并 添加 alt 和 width 属性 : 


«a class-"navbar-brand" href-"index.html"»«img src-"((root))/images/logo.png" 
alt-"Bootstrappin'" width-"120"»«/a» 









































请 确保 使 用 width 属性 ， 并 将 宽度 设置 为 120 像素 。 否 则 页 面 上 显示 的 图 片 将 


若 未 运行 pootstrap watch 命令 ， 现 在 运行 它 即 可 看 到 logo 图 片 效 果 。 








Bookiappir Home Portfolio Team Contact 
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此 时 , 导航 条 高 度 增加 了 , 其 底 边 也 不 再 跟 活 动 导航 项 的 底 边 对 齐 了 。 这 是 因为 navbar-brand 
类 周围 设 定 了 内 边 距 ， 我 们 得 再 调整 一 下 相应 内 边 距 的 值 。 只 需要 以 下 简单 几 步 。 


(D) 再 次 用 文本 编辑 器 打开 scss/includes/_navbar.scss 文件 。 用 以 下 方式 修改 bar-brana 的 内 
边 距 : 


padding: ($spacer - ((2.16rem - ($font-size-base * $line-height)) / 2)); 
(D 将 图 片 宽度 调整 为 120 像素 时 ， 其 高 度 会 变 成 34.51 像素 左右 ， 合 34.51/16=2.16rem。 


Sass 的 威力 再 次 给 我 们 留 下 深刻 的 印象 。 当 然 , 我 们 也 应 处 理 小 型 窗口 中 折 受 的 响应 式 导 航 
条 。 将 浏览 器 视 口 宽度 调整 至 小 于 768 像素 。 


此 时 ， 导 航 将 如 下 图 所 示 。 
































Bootstrappin' 


Home 
Portfolio 


Team 








Contact 





可 以 看 到 ，logo 旁边 的 内 边 距 过 小 ， 而 切换 按钮 与 logo 之 间 也 没有 对 齐 。 同 样 ， 我 们 将 使 
用 Sass 来 解决 这 些 问题 。 打 开 scssincludes/_navbar.scss 文件 。 还 记得 之 前 我 们 把 导航 条 的 垂直 
内 边 距 设 为 0 n B K, 如 以 下 代码 所 示 ， 将 相关 的 CSS 声明 封装 到 媒体 查询 规则 中 ,使 
其 仅 对 大 视 口 有 效 : 


Ginclude media-breakpoint-up(md) { 
padding-top: 0; 
padding-bottom: 0; 

} 


如 之 前 所 解释 的 ， 作 为 Bootstrap 中 Sass 混入 的 成 员 ，media-breakpoint-up 混入 会 根据 
Bootstrap 中 的 媒体 查询 范围 来 显示 或 隐藏 相关 元 素 。 上 述 SCSS 代码 会 编译 成 以 下 CSS: 


Gmedia (min-width: 768px) ( 
.navbar ( 
padding-top: 0; 
padding-bottom: 0; 
j 
j 
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至 于 logo 和 切换 按钮 之 间 的 对 齐 问题 ， 可 将 logo 图 片 的 display 属性 从 block MUN 
inline-block。 可 以 修改 scss/includes/ navbar.sess 文件 中 的 以 下 SCSS 代码 : 





.navbar ( 
Ginclude media-breakpoint-down(sm) ( 
.navbar-brand, 
.nav-item ( 
float: none; 
» img ( 
display: inline-block; 
J 
} 
} 
} 


最 后 ， 在 浏览 器 中 查看 scss/includes/ navbar.sess 文件 的 最 新 版 本 ， 结 果 如 下 图 所 示 。 





Bootstrappin’ = 


Home 
Portfolio 
Team 


Contact 














下 面 处 理 图 标 。 





5.9 添加 图 标 


现在 轮 到 为 导航 添加 图 标 了 。Bootstrap 4 中 不 再 包括 Bootstrap 3 所 附带 的 Glyphicon。 我 们 
将 使 用 由 Font Awesome 所 提供 的 大 型 图 标 库 。 你 也 可 以 在 网 络 上 找到 别 的 字体 图 标 库 。 


在 写作 本 书 时 ，Font Awesome 包含 628 个 图 标 。Font Awesome 图 标 免费 、 开 源 ， 而 且 也 使 
用 在 Bootstrap 中 使 用 。 


下 面 我 们 就 来 使 用 Font Awesome 图 标 。 


在 第 2 章 中 ,我 们 已 经 见 过 用 CDN 来 加 载 Font Awesome 的 方式 ,本 章 我 们 将 把 Font Awesome 
的 css 代码 编译 进 app.css 主 文 件 中 : 


(1) 首先 ， 运 行 以 下 命令 ， 在 项 目 文 件 夹 中 安装 Font Awesome: 


bower install font-awesome --save 



































(2) 然后 ， 即 可 在 scss/app.scss 中 引入 Font Awesome 的 主 SCSS 文件 : 
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Gimport "includes/variables"; 

QGimport "font-awesome/scss/font-awesome.scss"; 
Gimport "includes/bootstrap"; 

Gimport "includes/navbar"; 


(3) 最 后 ， 将 字体 文件 复制 到 assets 文件 夹 中 : 


cp bower. components/font-awesome/fonts/* assets/fonts/ 





(4) Font Awesome 的 scss 文件 中 会 用 一 个 变量 来 指定 Web 字体 的 路 径 。 我 们 需要 检查 该 变量 ， 
确保 变量 值 与 项 目的 文件 结构 相符 。 在 scss/ncludes/ variables.scss 文件 中 ， 检 查 确 认 变 量 


sfa-font-path 的 值 被 设置 为 . . /fonts: 
sfa-font-path: "Og tonbts"; 
该 路 径 是 相对 于 编译 后 的 CSS 文件 而 言 的 ， 在 本 例 中 ， 它 指向 我 们 的 css 目录 。 
至 此 ， 即 可 在 html/includes/header.html 文件 中 用 Font Awesome 图 标 fa-group 来 
表示 导航 条 中 的 “团队 ”项 ,需要 一 个 单独 的 fa 类 :<iclass="fa fa-group"> 


</i> Teams 


(5) 将 更 改 保存 至 html/includes/header.html 文件 ， 然 后 刷新 浏览 器 。 
如 果 一 切 顺利 ， 应 该 看 到 如 下 结果 。 








$$ Team 











如 果 你 看 到 的 是 一 个 奇怪 的 图 标 符号 ， 或 者 什么 也 没 看 到 ， 那 说 明 Web 字体 并 
没有 应 用 ,这 时 候 , 要 检查 一 下 图 标 类 是 否 正 确 ( 包括 fa 类 ), 确保 Font Awesome 
字体 都 在 fonts ARP, 而且 要 确保 scss/includes/ variables.scss 中 的 路 径 也 没有 
问题 。 


TE html/includes/header.html 文件 中 调整 所 使 用 的 图 标 标 记 ,， 使 用 所 需 的 Font Awesome 图 标 。 








可 以 访问 Font Awesome 的 图 标 集 页 面 http://fortawesome.github.io/Font-Awesome/icons/, 选 
自己 所 需 的 图 标 。 在 本 例 中 ， 导 航 条 所 使 用 的 图 标 如 下 : 

«i class="fa fa-home"»«/i» Home 

«i class="fa fa-desktop"»«/i» Portfolio 


«i class-"fa fa-group"»«/i» Team 
«i class="fa fa-envelope"'»«/i» Contact 


效果 如 下 图 所 示 。 








A Home G Portfolio $$ Team & Contact 
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导航 条 就 这 样 设计 完成 了 一 一 或 者 说 , 基本 完成 了 。 因 为 我 们 在 不 经 意 间 又 制造 了 一 个 不 得 
不 解决 的 小 麻烦 。 在 继续 之 前 ， 必 须 先 把 它 及 时 处 理 掉 。 


接 下 来 该 调整 传送 带 了 。 


























5.10 ”调整 传送 带 样 式 


关于 传送 带 ， 我们 主要 还 是 使 用 Bootstrap 默认 的 样式 ， 同 时 对 几 个 比较 重要 的 地 方 进行 定 
制 。 为 此 ， 我 们 将 创建 一 个 名 为 scss/includes/carousel.sess 的 新 文件 ， 并 将 其 引入 到 scss/app.scss 
文件 里 。 


下 面 ， 我 们 来 定制 和 美化 传送 带 。 




















5.10.1 添加 上 、 下 内 边 距 
先 为 .carousel 元 素 添加 一 点 上 、 下 内 边 距 ， 并 将 背景 色 设置 为 aegray-1ighter: 


.carousel ( 
padding-top: 4px; // added 
padding-bottom: 28px; // added 


background-color: Ggray-lighter; // added E 
} 


保存 并 刷新 后 (运行 bootstrap watch 或 gulp 命令 ), LAN AAE , 可 以 看 到 
传送 带 中 图 片上 、 下 方 的 浅 灰色 背景 。 这 样 就 似乎 有 了 一 个 框 ,将 图 片 与 其 上 、 下 的 元 素 隔 离开 
来 。 此 外 ， 我 们 还 要 利用 多 出 来 的 下 内 边 距 重 新 定位 传送 带 指 示 器 ， 让 它 更 显眼 一 些 。 


下 面 ， 该 调整 传送 带 指 示 器 了 。 

















5.10.2 重 定 位 传送 带 指示 器 


传送 带 指 示 器 的 作用 是 向 用 户 显示 一 共有 几 张 幻灯 片 ， 当 前 幻灯 片 是 第 几 张 。 现 在 ,指示 器 
很 难 被 看 清楚 ， 仔 细 看 才 会 发 现 它 位 于 作品 展示 图 片 底部 中 间 。 


— ———— | 
请 注意 ， 以 上 图 片 边框 颜色 被 临时 设置 为 白色 : 
.carousel-indicators li ( 


border: 1px solid white; 
} 


下 面 我 们 把 指示 器 放 到 它 应 该 在 的 位 置 上 : 图 片 下 方 。 
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(1) 我 们 打算 把 它们 挪 到 几乎 靠近 底 边 的 位 置 ， 进入 前 面 添 加 内 边 距 制 造 出 来 的 浅 灰 色 区 
调整 底部 定位 的 值 可 以 做 到 。 此 外 ， 还 需要 同时 把 下 外 边 距 重 置 为 0。 在 文件 _scsyincludes/ 
carousel.sess 中 编写 以 下 SCSS 代码 : 


.carousel-indicators ( 
position: absolute; 
bottom: 0; 
margin-bottom: 0; 


} 
(2) 保存 文件 ， 如 果 bootstrap watch 命令 已 运行 ， 则 浏览 需 会 自动 刷新 


这 样 就 达到 了 我 们 的 目的 。 现 在 ， 指 示 顺 在 各 种 屏幕 上 都 处 于 所 期 望 的 位 置 。 


| 


接 下 来 ,我们 调整 指示 需 的 外 观 ， 让 它们 更 大 ， 更 显眼 一 些 ! 















































5.10.3 ”调整 指示 器 样式 


我 们 要 使 用 灰色 相关 的 变量 ,把 传送 带 指示 器 调整 得 更 显眼 一 些 。 除 了 调整 颜色 ,也 要 增加 
尺寸 。 就 从 scss/includes/_variables.scss 文件 开始 吧 。 








(1) 在 scss/includes/ variables.sess 中 ， 位 于 $carousel-control 相关 变量 后 面 ， 可 以 看 到 
两 个 以 Scarousel-indicator 开头 的 变量 : 这 两 个 颜色 用 于 默认 状态 下 指示 器 的 边框 , 还 有 选 
中 状态 下 指示 器 的 背景 填充 。 


$carousel-indicator-active-bg: Hfff; 
S$carousel-indicator-border-color: Hfff; 


(2) 我 们 在 这 里 添加 一 个 默认 的 背景 颜色 变量 , 并 使 用 $sgray-1ight 值 作为 默认 状态 下 指示 
融 的 填充 色 : 





























Scarousel-indicator-bg: $gray-light; 
(3) 然后 ， 修 改选 中 状态 下 的 背景 
$carousel-indicator-active-bg: $gray-lightest; 


(4) 最 后 ， 把 边框 色 颜 色 设 置 为 透明 : 
Gcarousel-indicator-border-color: transparent; 

(5) 保存 、 编 译 并 刷新 。 

至 此 ， 除 了 证 活动 状态 下 的 指示 器 不 可 见 ， 其 他 样式 都 就 绪 了 。 
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下 面 ， 再 打开 scss/includes/ carousel.scss 文件 。 


(1) fE. scss/includes/ carousel.scss 文件 中 ， 找 到 .carousel-indicators 下 面 的 第 一 组 规则 : 


.carousel-indicators { 
position: absolute; 


) 
Q) TS Hor 1i 选择 符 。 在 这 里 需要 修改 儿 个 值 。 执 行 以 下 操作 : 


O 把 width 和 neight 增 大 到 16 像素 ; 

口 删除 外 边 距 ; 

O 添加 background-color 声明 ， 值 设置 为 新 变量 Scarousel-indicator-bg; 
O 删除 边框 线 〈 前 面 把 边框 变量 设置 为 透明 ， 就 是 为 了 这 里 安全 ); 

口 通过 以 下 代码 片段 实现 修改 : 


.carousel-indicators { 
position: absolute; 












































bottom: 0; 
margin-bottom: 0; 
li ( 
background-color: $carousel-indicator-bg; 
&, 
&.active ( 
border: 0; 


height: 16px; 
width: 16px; 
margin: 0; 
} 
} 
} 


(3) 在 Bootstrap 默认 的 CSS 中 ， 与 普通 的 指示 器 相 比 ( 10 像素 )， 当 前 选中 的 指示 器 会 更 大 
一 些 (12 像素 )。 由 于 这 一 设 定 ， 我 们 需要 将 所 有 的 指示 器 大 小 都 设置 为 新 的 值 C16 像素 )。 可 
以 用 像 之 前 代码 片段 中 的 Sass 和 的 父 引 用 来 实现 这 一 点 。SCSS 代码 片段 示例 如 下 : 


.Selector ( 
&, 
&.active, 
&.otherstate ( 
property: equal-for-all-states; 
} 
} 


(4) 该 SCSS 代码 会 编译 成 以 下 CSS: 
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.Selector, .selector.active, .selector.otherstate ( 
property: equal-for-all-states; 


} 


保存 ， 看 看 结果 吧 ! 


= 





Company 








传送 带 的 调整 工作 完成 啦 ! 一 路 下 来 ,我们 也 学 到 不 少 东 西 : 很 多 关于 Bootstrap 的 约定 ， 
还 有 一 些 关 于 Sass。 


从 下 一 节 开 始 ， 事 情 就 越 来 越 简单 了 。 








jn 





5.11 调整 分 栏 及 其 内 容 
下 面 我 们 来 调整 一 下 位 于 标题 Welcome! Recent Updates #1 Our Team 下 面 的 三 个 内 容 块 。 


(1) 首先 ， 为 每 个 块 中 的 按钮 添加 圆圈 箭头 图 标 。 还 记得 我 们 可 以 使 用 Font Awesome 挑选 图 
标 吧 ! 











(2) 查看 Font Awesome 文档 : http://fortawesome.github.io/Font-Awesome/icons/， 可 以 找到 我 
们 想 使 用 的 图 标 。 








© arrow-circle-right 











(3) 在 html/pages/index.html 文件 中 ,为 每 个 链接 添加 带 有 适当 类 的 i 标签 。 下 面 是 为 第 一 个 
链接 添加 代码 后 的 结果 ， 为 清晰 起 见 ， 元 素 间 加 了 回 车 换行 。 


«p» 
«a class-"btn btn-primary pull-right" href="#"> 
See our portfolio <i class="fa fa-arrow-circle-right"'»«/i» 
</a> 
</p> 








(4) 对 每 个 链接 都 如 此 操作 。 
这 样 ， 三 个 按钮 上 就 都 有 相同 的 图 标 了 。 





Welcome! Recent Updates Our Team 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. iaculis tincidunt. Donec at ultrices est. iaculis tincidunt. Donec at ultrices est. 




















再 为 文本 块 与 传送 带 之 间 增 加 一 些 垂直 内 边 距 ， 现 在 太 挤 了 。 





当前 的 问题 是 , 相关 的 样式 放 在 哪里 最 合适 ”为 页 面 中 的 内 容 部 分 添加 额外 的 内 边 距 在 目前 
和 以 后 都 是 经 常 可 能 发 生 的 ， 所 以 我 们 最 好 创建 一 个 Sass 文件 ， 用 以 保存 这 些 及 其 他 改动 。( 巧 
的 是 ,我 们 也 正 需要 一 个 这 样 的 文件 ,用 以 添加 额外 的 、 更 重要 的 响应 式 调整 ， 所 以 看 来 真有 必 
要 创建 一 个 新 文件 了 。 ) 


(1) 创建 一 个 新 文件 ， 命 名 为 scss/includes/_page-contents.scss。 
(2) 把 它 保存 到 sess 文件 夹 中 ， 与 其 他 定制 Sass 文件 放 在 一 起 。 


«image of the directory scss» 


Q) 在 文件 中 添加 以 下 注释 : 
































(4) 然后 ， 写 一 个 让 人 一 目 了 然 的 类 名 ， 再 加 上 适当 的 内 边 距 一 一 包括 下 内 边 距 : 


.page-contents { 
padding-top: 20px; 
padding-bottom: 40px; 

} 


(5) 保存 文件 。 

(6) 把 scss/includes/ page-contents.scss 文件 引入 到 scss/main.sess 文件 中 。 在 这 里 ， 我 把 引入 
代码 放 到 文件 最 下 面 ， 同 时 也 加 上 注释 : 

// 其 他 定制 文件 


Qimport "includes/page-contents"; 


(7) 下 面 再 在 标记 中 添加 必要 的 类 。 打开 html/pages/index.html, Aj container 类 的 aiv 
元 素 添加 page-contents 类 ， 就 在 传送 带 之 后 : 
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{{> carousel))«!-- /#homepage-feature.carousel --> 
«div class-"page-contents container"-» 
«div class="row"> 


保存 并 刷新 浏览 恬 ， 应 该 看 到 内 边 距 已 经 加 上 了 。 


接 下 来 ,我 们 再 调整 罕 屏 幕 下 这 些 块 的 效果 。 如 下 图 所 示 ,， 在 一 栏 布局 时 ,标题 并 没有 清除 
浮动 的 按钮 。 








Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 











ASHA COBCPS SE DARAUS fS eL ER aiv 添加 一 个 clearfix 类 ， 但 不 能 这 么 做 ， 
因为 在 视 口 在 768 像素 及 以 上 宽度 时 ， 需 要 让 这 些 块 都 浮动 起 来 ， 谁 也 不 能 清除 谁 。 


这 时 候 就 要 用 到 媒体 查询 了 。 因 为 三 栏 布局 是 从 中 型 断 点 ， 也 就 是 768 像素 开始 的 。 那 我 们 
可 以 用 媒体 查询 来 设置 , 在 视 口 比 这 个 断 点 小 1 像素 时 , 就 给 文本 块 应 用 清除 规则 。 如 之 前 所 示 ， 
可 以 用 Bootstrap 中 媒体 查询 相关 的 Sass 混入 来 实现 这 一 点 。 


除 此 之 外 ， 最 好 再 为 这 几 栏 添加 一 些 下 内 边 距 ， 让 它们 垂直 堆 释 时 ， 相 互 之 间 有 点 空 际 。 


在 我 们 的 媒体 查询 混入 中 ,将 使 用 CSS2 的 属性 选择 符 来 选择 类 中 包含 col -的 所 有 元 素 ， 
从 而 让 同一 组 规则 能 够 应 用 至 任何 尺寸 的 分 栏 : 


.page-contents { 
padding-top: 20px; 
padding-bottom: 40px; 
Ginclude media-breakpoint-down(sm) ( 
[Glsss*ts" colbe"] Y 
clear: both; 
padding-bottom: 40px; 
j 
j 
} 


保存 并 刷新 。 结 果 大 为 改善 ! 
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Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 











效果 好 多 了 ! 下 面 该 来 修饰 页 脚 了 。 


5.12 调整 页 脚 样 式 
页 脚 最 主要 的 功能 就 是 罗列 社交 图 标 。 就 用 Font Awesome! 


查询 Font Awesome 文档 , 可 以 在 Brand Icons 部 分 找到 我 们 想到 的 图 标 : http://fortawesome. 


github.io/Font-Awesome/icons/Zbrand 。 


那么 ,只 要 把 页 脚 文 件 htmlyincludes/footerhtml 中 的 社交 链接 替换 成 带 有 相应 类 的 i 元 素 即 可 。 


«ul class-"social"» 


<li><a href="#" 

<li><a href="#" 

<li><a href="#" 

<li><a href="#" 

<li><a href="#" 
«/ul» 





»«i class-"fa fa-twitter"»«/i»«/a»«/li» 
><i class-"fa fa-facebook"»«/i»«/a»«/li» 
><i class="fa fa-linkedin"'»«/i»«/a»«/li» 


><i class="fa fa-google-plus"></i></a></li> 


><i class="fa fa-github-alt"></i></a></li> 





替换 之 后 的 标记 让 原来 的 社交 链接 变 成 了 图 标 链接 。 





Bootstrappin' 
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为 了 让 这 些 图 标 水 平 排列 并 居中 ， 执 行 下 列 操作 。 


(1) 创建 一 个 新 文件 scss/includes/_footer.scss 来 管理 相关 样式 。 
(2) 把 这 个 文件 保存 到 sess 目录 中 : 
(3) 在 _main.less 中 添加 引入 这 个 文件 的 变量 : 


// 其 他 定制 文件 

Gimport "includes/navbar"; 
Gimport "includes/carousel"; 
Gimport "includes/page-contents"; 
QGimport "includes/footer"; 





























接 下 来 就 可 以 写 样式 了 。 我 们 先 列 出 样式 ， 然 后 再 解释 : 
// 

// 页 肢 

// -------------------------- 


ul.social ( 
margin: 0; 
padding: 0; 
width: 100$; 
text-align: center; 
pu cu 
display: inline-block; 
> af{ 
display: inline-block; 
font-size: 18px; 
line-height: 30px; 
einclude square(30px); // X,includes/mixins/ size.scss 
border-radius: 36px; 
background-color: $gray-light; 
color: d fff; 
margini 0- 3px 3px 0; 
&:hover, 
&:focus { 
text-decoration: none; 
background-color: $link-hover-color; 


} 


} 








由 于 Bootstrap 会 在 Sass 中 尽量 避免 使 用 元 素 选 择 符 和 子 元 素 选择 符 ， 上 述 SCSS 代码 可 以 
重 写 为 : 


.Social ( 
margin: 0; 
padding: 0; 
width: 100$; 
text-align: center; 
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.Social-item ( 
display: inline-block; 


.Social-link ( 

display: inline-block; 

font-size: 18px; 

line-height: 30px; 

Ginclude square(30px); 

// NK, includes/mixins/ size.scss 

border-radius: 36px; 

background-color: $gray-light; 

color: dfff; 

margin: 0 3px 3px 0; 

Ginclude hover-focus { 
// bootstrap/scss/mixins/ hover.scss 
text-decoration: none; 
background-color: $link-hover-color; 
color: dfff; 





} 


当 把 新 的 SCSS 代码 编译 成 CSS 代码 后 ， 需 要 修改 相应 的 HTML 代码 。 按 以 下 方式 ， 编 辑 
html/includes/footer.html 文件 中 页 脚 的 HTML， 代 码 片 段 如 下 所 示 : 


«ul class="social"> 5 
«li class="social-item"><a href="#" class-"social-link" »«i 









































class="fa fa-twitter"»«/i»«/a»«/li» 

«li class-"social-item"»«a href-"4" class-"social-link" ><i 
class-"fa fa-facebook"»«/i»«/a»«/li» 

«li class-"social-item"»«a href="#" class-"social-link" »«i 
class-"fa fa-linkedin"»«/i»«/a»«/li» 

«li class-"social-item"»«a href="#" class-"social-link" »«i 
class="fa fa-google-plus"»«/i»«/a»«/li» 

«li class-"social-item"»«a href-"4" class-"social-link" ><i 
class="fa fa-github-alt"»«/i»«/a»«/li» 
«/ul» 


下 面 对 SCSS 进行 逐 行 解释 : 


口 去 掉 ul 中 默认 的 内 、 外 边 距 ; 

O 将 容器 宽度 拉 伸 到 百分之百 ; 

口 内 容 居中 排列 ; 

口 列表 项 显示 为 行内 块 ， 因 此 可 以 像 文本 一 样 居中 ; 

OQ 链接 也 显示 为 行内 块 ， 从 而 可 以 填 满 有 效 空间 ; 

O 增 大 字号 和 行 高 ; 

口 使 用 Boostrap 3 中 所 复制 过 来 的 混入 ， 将 宽度 和 高 度 设计 为 30 像素 见方 ; 
口 要 查看 这 个 混入 ， 打 开 includes/mixins/_size.scss， 可 以 看 到 下 列 代码 : 
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// 调整 快捷 键 大 小 


Gmixin size($width, $height) ( 
width: $width; 
height: $height; 

} 

Gmixin square($size) ( 
QGinclude size($size, $size); 


} 


O border-radius 属性 的 值 设置 得 足够 大 ， 以 便 图 标 及 其 背景 呈现 圆 形 ; 
口 设置 背景 色 、 前 景色 和 外 边 距 属性 ; 



































口 去 掉 悬 停 和 焦点 状态 默认 的 下 划 线 ， 同 时 把 背景 色 改 为 浅 灰 色 。 
设置 以 上 样式 后 ， 我 们 再 为 页 脚 添加 一 些 上 、 下 内 边 距 ， 然 后 将 内 容 居 中 排列 ， 

















在 社交 图 标 上 面 居中 显示 。 


footer[role-"contentinfo"] ( 
padding-top: 24px; 
padding-bottom: 36px; 
text-align: center; 


} 


结果 如 下 所 示 。 








Bootstrappin 











5.13” 接 下 来 做 什么 


以 便 logo 














在 实际 做 一 个 类 似 的 项 目 之 前 , 我 强烈 建议 大 家 至 少 再 做 一 件 事 , 那 就 是 花 点 时 间 优 化 你 的 





图 片 、CSS 和 JavaScript。 这 些 步 又 并 不 难 。 

















D 压缩 图 片花 不 了 多 少时 间 ， 却 能 最 大 程度 地 解决 导致 图片 爱 肿 的 问题 。 本 章 中 的 图 片 都 
在 Photoshop 中 使 用 了 “保存 为 Web 格式 "， 但 或 许 你 还 是 能 够 再 把 它们 压缩 一 些 。 第 2 








章 已 经 介绍 过 如 何在 gulp 构建 流程 里 添加 图 片 压 缩 任 务 。 


然后 压缩 main.css 文件 。 








口 此 外 ,应 该 马上 从 scess/includes/ bootstrap.sess 中 删除 那些 不 需要 的 Bootstrap 的 Sass 文件 ， 


O 最 后 ， 还 要 对 pluginsjs 文件 进行 “瘦身 ”， 把 Bootstrap 原来 大 而 全 的 bootstrap.min.js X 


件 替 换 成 只 包含 我 们 用 到 的 carousel.js 、collapse.js 和 transitions.js 的 压缩 版 。 然 后 再 压缩 


最 终 的 plugins.js 文件。 
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做 完 以 上 三 项 优化 ,整个 网 站 的 体 量 大 致 将 缩小 一 半 。 在 速度 就 是 生命 的 年 代 ， 既 要 考虑 用 
户 留 存 ， 又 得 考虑 SEO HZ, 这么 大 幅度 的 优化 可 不 得 了 。 如 需 了 解 处 理 代 码 以 适 配 生 产 环 境 
方面 的 知识 ， 可 参考 第 2 章 的 内 容 。 

此 外 ,还 有 一 个 非常 实际 的 措施 , 或 许 你 也 应 该 考虑 : 我 们 知道 ,触摸屏 设备 的 用 户 喜 欢 用 
手指 来 回 扫 屏 切 换 传送 带 图 片 。 


不 过 现在 ， 我 们 可 以 先 停 一 下 ， 庆 祝 一 番 。 














5.14 ”小结 


下 面 我 们 来 清点 一 下 本 章 的 成 就 。 我 们 用 Bootstrap CLI, E8 Panini, Sass 和 Gulp 创建 了 
一 个 新 的 Bootstrap 项 目 。 之 后 ， 我 们 利用 了 Bootstrap 的 响应 式 导 航 条 、 传 送 带 和 网 格 系统 ， 定 
制 一 些 Bootstrap 的 Sass 代码 和 混入 文件 。 与 此 同时 ， 我 们 还 创建 了 自己 的 Sass 文件 ， 并 将 它们 
无 颖 集成 到 了 项 目 中 。 最 后 ， 还 在 工作 流程 加 入 了 Font Awesome 字体 图 标 。 做 完 这 一 切 后 ， 就 
实现 了 一 个 未 来 容易 维护 的 网 站 。 网 站 的 文件 组 织 非 常 稳健 ， 且 没有 出 现代 码 豚 肿 的 现象 。 


有 了 这 些 经 验 ， 你 就 真 的 可 以 让 Bootstrap 为 你 所 用 了 : 利用 它 可 以 加 速 网 站 开发 ， 然 后 定 
制 核心 内 容 。 在 本 书后 面 几 章 里 ,我 们 还 将 继续 丰富 你 的 经 验 。 接 下 来 ,我 们 先 考虑 把 本 章 的 设 
计 转 换 成 一 个 复杂 的 企业 网 站 主页 。 























企业 网 站 














上 一 章 制作 了 个 人 作品 展示 站 点 。 本 章 ， 轮 到 我 们 充实 这 个 作品 展示 站 点 ， 补 充 一 些 项 目 ， 
以 展示 我 们 的 能 力 了 。 换 句 话说， 我 们 要 构建 一 个 复杂 的 企业 主页 。 


请 大 家 论点 时 间 看 一 看 下 面 几 家 成 功 企 业 的 网 站 的 主页 : 





口 Zappos (http://zappos.com ); 
C] Amazon ( http://amazon.com ); 
U Adobe ( http://adobe.com ); 

O HP (http://hp.com )。 


尽管 这 些 网 站 各 有 特色 ， 但 共同 的 一 点 就 是 它们 都 很 复杂 。 
如 果 按 照 页 面 区 域 划 分 ， 可 以 将 这 些 网 站 的 主页 分 成 三 部 分 。 


口 页 头 区 : 这 一 部 分 包含 logo、 带 下 拉 菜 单 的 主导 航 、 二 级 或 实用 链接 导航 ， 以 及 登录 或 
注册 选项 。 

口 主 内 容 区 : 这 一 部 分 布局 复杂 ， 至 少 三 栏 。 

口 页 脚 区 : 包含 多 栏 链 接 和 信 | 
我 们 必须 能 够 掌控 这 些 复杂 性 。 为 此 ， 需 要 充分 利用 Bootstrap 的 12 栏 响应 式 网 格 系统 。 


以 下 是 我 们 打算 要 构造 的 设计 在 中 、 宽 视 口 中 的 效果 。 
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Featured Content 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


E 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Read more © 


fringilla felis feugiat eget. 





YLE: 
Athletic 


Women 


Ki 


And another thing 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Learn more © 


re 


OTI ABOUT L 
Link Lorem ipsum dolor sit ame 
Another link ongue bibendum. Aliquam erat volutp 
Link again pharetra ullan i 
Tr iverra arcu 

Don't you dare sollicitudin metus 
Oh go ahead 


iquet turpis rutrun 


y f ne ð 





在 罕 视 口中 ， 页 面 会 相应 变化 ， 如 下 图 所 示 。 





三 Bootstrappin’ 
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Featured Content 


Suspendisse et arcu felis, ac gravida 
turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat 
eget. 





Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 











& Log In or Register View Cart 


ALL DEPARTMENTS 


Don't Miss! 


Suspendisse et arcu fels, ac 
gravida turpis. Suspendisse 

potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non 
purus quis elit iaculis tincidunt. 
Donec at ultrices est. 


Read more © 


Check it out 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non 
purus quis elit iaculis tincidunt. 
Donec at ultrices est. 


Read more © 
Finally 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed 
fringilla feis feugiat eget. In non 
purus quis elit iaculis tincidunt. 
Donec at ultrices est. 


Read more © 
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接 下 来 ， 我 们 需要 做 以 下 这 些 事 
(1) 以 第 5 章 为 起 点 。 

(2) 创建 复杂 的 页 头 区 ， 包 括 logo、 导 航 以 及 右上 角 的 实用 导航 ( 桌面 视 口 )。 
(3) 在 较 罕 的 视 口中 ， 实 用 导航 只 显示 为 图 标 ， 与 折 赫 后 的 响应 式 导 航 条 并 列 。 
(4) 要 实现 企业 风格 的 配色 方案 

(5) 调整 划 面 版 和 响应 式 导航 条 。 

(6) 为 主 内 容 区 和 页 脚 区 设置 复杂 的 多 栏 布局 。 


先 做 最 核心 的 工作 吧 一 一 准备 项 目的 启动 文件 。 


6.4 准备 启动 文件 


与 本 书 中 的 其 他 项 目 一 样 ,本 章 的 启动 文件 也 可 以 从 Packt Publishing 网 站 下 载 : http://www. 
packtpub.com/support。 下 载 后 解压 缩 ， 找 到 文件 夹 chapter6/start 即 可 。 


这 些 文件 源 自 第 5 章 ， 因 此 已 经 具备 了 以 下 重要 组 件 。 


口 包括 Sass 编译 器 和 Panini 模板 引擎 在 内 的 完整 的 构建 流程 。 
口 Bootstrap 的 SCSS 和 JavaScript 文件 。 
口 Panini HTML 模板 。 


除了 以 上 重要 的 资源 之 外 , 我 们 还 在 构造 第 5 章 时 添加 过 一 些 定 制 的 Sass 文件 , 可 以 在 scss 
和 sess/includes 目录 中 找到 它们 。 





o 


















































口 _main.scss: 引入 了 位 于 bower components/bootstrap/sess 目录 中 的 Bootstrap 的 Sass 文件 、 
Font Awesome 字体 图 标 和 我 们 定制 的 Sass 文件 。 

口 carouselscss: 定制 了 7 传送带 的 内 边 距 、 背 景 和 指示 图 标 。 

口 _footerscss: 包含 logo 及 社交 AKTE eg 布局 和 设计 样式 。 

口 _navbar.scss: 在 .navbar-brand 类 中 调整 了 内 边 距 ， 以 使 导航 条 中 的 logo 位 置 合适 。 
口 _page-contents.scss: 其 中 的 样式 确保 了 每 一 栏 中 的 浮动 按钮 在 呈现 为 窗 单 栏 布局 的 情况 下 
相互 清除 。 

口 _variables.scss: 基于 Bootstrap 和 variables.less， 针 对 导航 条 和 传送 带 定制 了 灰色 、 调 整 
了 变量 。 


使 用 的 Font Awesome 字体 图 标 资源 包括 以 下 。 


D fonts 文件 夹 中 的 图 标 字 体 。 
口 bower components/font-awesome 文件 夹 中 的 Sass 文件 。 
口 可 以 运行 以 下 命令 ， 使 用 这 些 文件 。 
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bower installing 
npm install 


之 后 ， 可 以 运行 npm start 9X bootstrap watch 


6.2 搭建 基础 设计 


命令 ， 





我 们 从 修改 第 5 章 的 成 果 开 始 ， 预 期 达到 下 图 所 示 的 效果 。 


编译 项 目 并 在 浏览 器 中 观察 改变 。 





Bootstrappin" Shoes - Clothing ~ 


en 9 
Featured Content 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. 





Accessories ~ 


Women ~ Men ~ 


Welcome! 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Recent Updates i 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


And another 

thing 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Bootstrappin 


O90090 


Kids ~ 


All Departments ~ 


Don't Miss! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Check it out 


Suspendisse et arcu felis, ac 

gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In 
non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Finally 

Suspendisse et arcu felis, ac 

gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla telis feugiat eget. In 
non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 








T 





下 面 说 明 一 下 相关 的 特性 。 








口 三 栏 中 的 第 一 栏 开 头 是 








我 们 必须 重新 组 织 第 5 音 项 目 文件 中 的 元 素 。 传 送 带 已 经 变 小 了 , 宽度 被 包含 它 的 栏 所 限于 


除 此 之 外 ， 标 记 没有 本 质变 化 。 


6.2.1 





加 到 导航 条 中 。 


口 导航 条 很 复杂 ， 有 7 个 主导 航 项 ， 每 一 项 都 有 下 拉 菜 单 。 
个 传送 带 ， 后 面 是 一 个 标题 、 一 个 段落 和 一 个 按钮 。 
a 第 二 和 第 三 栏 同样 都 包含 标题 和 段落 ， 以 及 “Read more 一 ”按钮 。 
口 页 脚 包含 logo 和 社交 媒体 图 标 。 





在 导航 条 中 添加 下 拉 菜 单 
Bootstrap 中 的 JavaScript 下 拉 插 件 可 以 让 我 们 轻松 地 创建 下 拉 菜 





zm 


o 














该 下 拉 菜 单 添 


在 文本 编辑 器 中 打开 html/includes/header.html 文件 。 请 注意 ,我们 的 Gulp 构建 流程 会 使 用 
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Panini 这 一 基于 Handlebars 模板 语言 的 HTML 编译 器 ,将 HTML 模板 转换 成 HTML 网 页 ,在 Panini 
模板 文件 中 ,可 以 使 用 帮助 类 、 从 代 器 和 和 定制 的 数据 。 本 例 中 , 我 们 将 借助 Panini 创建 拥有 下 拉 
菜单 的 导航 条 项 目 。 


首先 ， 创建 名 为 html/data/productgroups.yml 的 文件 ， 并 在 其 中 保存 导航 条 的 栏目 名 称 : 


- Shoes 

Clothing 

- Accessories 

- Women 

- Men 

- Kids 

- All Departments 
































上 述 代码 的 格式 为 YAML, YAML 是 一 种 易 读 的 、 受 编程 语言 和 XML 启发 的 序列 化 语言 。 
可 以 访问 http:/yamlorg/， 了 解 更 多 相关 的 信息 。 


基于 上 述 数据 ， 可 以 编写 HTML 模板 代码 来 创建 导航 条 栏目 : 


«ul class="nav navbar-nav navbar-toggleable-sm collapse"id-"collapsiblecontent"-» 
{{#each productgroups)) 
«li class-"nav-item dropdown {{#ifCond this'Shoes'))active((/ifCond))"» 
«a class-"nav-link dropdown-toggle" data-toggle-"dropdown" href="#" 
role="button" aria-haspopup-"true" aria-expanded-"false"- 
(( this F} 
</a> 
«div class="dropdown-menu"> 
<a class="dropdown-item" href="#">Action</a> 
<a class="dropdown-item" href="#">Another action</a> 
«a class-"dropdown-item" href="#">Something else here</a> 
«div class-"dropdown-divider"»«/div» 
«a class-"dropdown-item" href="#">Separated link</a> 
</div> 


























</li> 
{{/each}} 
«/ul» 


上 述 代码 使 用 了 each 循环 语句 来 创建 7 个 导航 条 栏目 ， 并 为 它们 各 自 都 添加 了 下 拉 菜 单 。 
其 中 ，Shoes 菜单 被 设置 为 当前 活动 状态 。 默 认 情况 下 ，Handlebars 和 Panini 都 不 支持 比较 判断 
语句 。 模 板 中 的 i£ 语句 只 接受 一 个 值 作为 参数 ， 但 你 也 可 通过 增加 定制 帮助 类 来 实现 比较 判断 
语句 的 效果 。 可 以 查看 html/helpers/ifCond.js 文件 ， 了 解 定义 了 ifcong 语句 的 定制 帮助 类 。 可 
以 访问 http:Wbassjobsen.weblogs.fm/set-panini-different-environments/， 阅 读 拙 文 “How to set up 
Panini for different environments”, 3J EZA X Panini 和 定制 帮助 类 的 知识 。 


至 于 下 拉 菜 单 所 需 的 HTML 代码 , 则 基本 与 下 拉 插 件 文档 中 所 描述 的 一 致 : https://getbootstrap. 
com/docs/4.3/components/dropdowns/。 


在 小 尺 十 屏幕 下 ， 导 航 条 会 发 生 折 和 县。 而 下 拉 菜 单 的 样子 则 保持 不 变 。 
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Clothing ~ 


Action 
Another action 


Something else here 


Separated link 


Kids ~ 











设置 页 眉 的 下 边框 





可 以 创建 一 个 新 的 Sass 局 部 文件 , 并 在 其 中 编写 以 下 SCSS 代码 , 为 页 应 设置 一 条 明显 的 边 
界线 : 


header[role-"banner"] ( 


border-bottom: 4px solid $gray-lighter; 
} 














6.2.2 用 holder.js 添加 图 片 
































相对 比较 难 一 点 的 地 方 是 这 里 使 用 了 一 个 JavaScript 插件 holderjs， 目 的 是 为 传送 带动 态 生 
成 占 位 图 片 。 


可 以 运行 以 下 命令 ， 用 Bower 安装 holder.js 插件 : Om 
bower install holderjs --save-dev 


安装 成 功 后 ， 可 以 使 用 Gulpfile,js 文件 中 的 compile-3s 任务 ,将 该 插件 跟 其 他 JavaScript 
代码 一 起 链接 到 app.js 文件 中 : 


gulp.task('compile-js', function() ( 
return gulp.src([ 
bowerpath« 'jquery/dist/jquery.min.js', 
bowerpath+ 'tether/dist/js/tether.min.js', 
bowerpath« 'bootstrap/dist/js/bootstrap.min.js', 
bowerpath+ 'holderjs/holder.min.js', // Holder.js for project 
development only 
'js/main.js'] 
.pipe(concat('app.js')) 
.pipe(gulp.dest('./ site/js/')); 
gN 





一 、 











如 果 查 看 标记 ， 就 会 发 现在 页 面 底部 plugins.js 插件 之 前 ， 我 们 包含 了 这 个 holderjs 脚本 : 
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<!-- Holder.js for project development only --» 
«script src-"js/vendor/holder.js"»«/script» 


最 终 的 产品 站 点 中 是 不 使 用 占 位 图 片 的 ， 因 此 单独 给 它 注释 出 来 很 有 必要 。 


加 载 了 holderjs 之 后 ， 就 可 以 方便 地 把 holderjs 作为 任意 图 片 的 来 源 。 然 后 使 用 伪 URL 指 
定 大 小 、 颜 色 和 填充 文本 ， 比 如 : 


«img src-"holder.js/600x480/auto/vine/textmode:literal" alt-"Holder Image"> 

















ED 更 多 信息 可 以 参考 holderjs 的 文档 : https;//github.com/imsky/holder., 


有 了 这 些 元 素 ， 尤 其 是 Bootstrap 内 置 的 样式 和 行为 ,我们 的 起 点 就 非常 高 了 。 下 面 我 们 就 
来 处 理 细节 。 








首先 ， 我 们 重新 定位 导航 条 ， 复 杂 化 页 头 的 设计 。 


6.3 创建 复杂 的 页 头 区 
下 面 我 们 就 从 上 到 下 ， 先 创建 复杂 的 页 头 区 ， 其 包括 如 下 特性 。 
口 在 桌面 及 较 大 视 口 中 ， 让 站 点 logo 显示 在 导航 条 之 上 。 
口 包含 菜单 项 的 导航 条 ， 每 个 菜单 项 又 都 包含 下 拉 菜 单 。 
口 实用 导航 区 。 
口 带 用 户 名 和 密码 的 登录 表单 。 
口 注册 选项 。 


以 下 是 桌面 视 口中 的 目标 结果 。 











& Log In or Register — 9» View Cart 


Bootstrappin' 


SHOES ~ CLOTHING ~ ACCESSORIES ~ MEN ~ WOMEN ~ KIDS ~ 








罕 视 口中 的 目标 结果 如 下 。 








ge 
n 





=  Dootstrappin 





我 们 从 放置 站 点 logo 开始 。 





6.3.1 把 logo 放 到 导航 条 上 方 
在 这 个 设计 方案 里 ，logo 可 能 出 现在 两 个 地 方 ， 视 情况 而 定 : 


口 在 桌面 和 宽屏 视 口 中 ， 显 示 在 导航 条 上 方 ; 
OQ 在 平板 和 手机 视 口 中 ， 显 示 在 响应 式 导航 条 内 部 。 


利用 Bootstrap 的 响应 式 工具 类 ， 这 两 点 我 们 都 可 以 做 到 ! 方法 如 下 。 




















(1) 在 编辑 厦 中 打开 html/includes/header.html X fF; 

(2) 将 logo 和 切换 按钮 移 到 nav 元 素 外 面 ， 并 用 <div class="container">...</div> 
封装 起 来 ， 使 其 被 限制 在 Bootstrap 居中 的 网 格 内 部 。 

(3) 删除 用 于 显示 logo 的 img 元 素 的 width 属性 。 

(4) 对 于 <ul class="nav navbar-nav"></ul> 元 素 , 也 用 <div class="container">... 
</div> 封 装 起 来 。 

(5) 在 第 2 个 <div class="container">...</div> 元 素 上 添加 navbar-toggleable-sm 


和 collapse 类 。 


(6) UG, html/includes/header.html 文件 中 的 HTML 代码 如 下 所 示 : 























«header role-"banner"'-» 
«div class-"container"» 

«button class-"navbar-toggler hidden-md-up" type="button" 
data-toggle-"collapse" data-target-"icollapsiblecontent"'-» 


«/button» 
«a class-"navbar-brand" href-"/"»«img src-"((root)j/images/logo.png" 
alt-"Bootstrappin'"»«/a» 





«/div» 
«nav class-"navbar navbar-full" role-"navigation"» 
«div class- "container navbar-toggleable-sm collapse" 


ide"collapsiblecontent"'-» 
«ul class="nav navbar-nav"'-» 
</ul> 

</div> 


</nav> 
</header> 


(7) 完成 对 HTML 的 修改 后 ， 即 可 再 次 借助 Sass， 根 据 视 口 的 大 小 来 调整 logo 的 样式 。 编 辑 
scss/includes/ header.scss 文件 中 的 以 下 SCSS 代码 : 


header[role-"banner"] { 
.navbar-brand { 
> img { 
width: 120px; 
padding-left: $spacer-x; 
Ginclude media-breakpoint-up(md) { 


166 第 6 章 企业 网 站 





padding-left: 0; 
width: 180px; 
j 
j 
j 
j 


在 上 述 步 又 中 ， 我 们 使 用 了 一 些 Bootstrap 中 预定 义 好 的 CSS 25$, HEF, niaden-má-up 类 
会 在 中 型 及 更 大 的 窗口 中 隐藏 内 容 ， 因 此 可 以 让 切换 按钮 仅 在 小 视 口 中 显示 。 与 此 同时 ， 
navbar-toggleable-sm 类 则 仅 在 小 和 超 小 视 口 中 有 效 。 


在 较 罕 的 视 口 中 ，logo 宽度 为 120 像素 ; 而 在 中 及 更 大 尺寸 的 视 口 中 ，logo 的 左 侧 内 边 距 会 
被 移 除 ， 其 宽度 也 会 调整 为 180 像素 。 














原始 logo 图 片 其 实 很 大 ， 约 900 像素 宽 。 为 了 让 它 在 视网膜 屏 上 显示 清晰 ， 我 
EÒ 们 已 经 使 用 wich 属性 (使 用 CSS 规则 也 行 ) 把 它 缩小 到 了 120 4 ERE, M 
证 足够 的 像素 密度 。 


保存 修改 ， 然 后 在 浏览 器 中 刷新 页 面 。 应 该 可 以 在 导航 条 上 看 到 预期 的 结果 。 在 中 及 更 大 尺 
寸 的 视 口 中 ， 显 示 的 会 是 大 尺寸 的 logos 
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在 小 和 超 小 视 口 中 ,会 显示 小 尺寸 的 logos 
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Bootstrap XEM ! 


下 面 我 们 来 调整 导航 条 。 


6.3.2 ”调整 导航 条 
现在 的 导航 条 包含 7 项 ， 每 项 又 各 有 子 菜单 ， 反 映 了 一 个 大 型 复杂 网 站 的 需求 。 


其 中 下 拉 菜 单 的 标记 直接 取 自 Bootstrap 的 下 拉 组 件 文档 : http://getbootstrap.com/components/ 
dropdowns/。 


如 果 你 查看 结果 标记 ， 会 发 现 以 下 特殊 的 类 和 属性 : 











口 父 级 li 元 素 中 的 class-"dropdown"; 
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口 链接 中 的 class-"dropdown-toggle"; 

口 链接 中 的 attripute="data-toggle"; 

DO 子 菜单 aiv 中 的 class-"dropdown-menu"; 
口 每 个 下 拉 菜 单项 的 class="dropdown-item"。 


以 下 是 结果 标记 : 


«li class-"nav-item dropdown"> 
«a class-"nav-link dropdown-toggle" data-toggle-"dropdown" href="#" 
role-"button" aria-haspopup-"true" aria-expanded-"false"»Shoes«/a» 
«div class-"dropdown-menu"» 
«a class-"dropdown-item" href="#">Action</a> 
«a class-"dropdown-item" href="#">Another action</a> 
«a class-"dropdown-item" href="#">Something else here</a> 
«div class-"dropdown-divider"»«/div» 
«a class-"dropdown-item" href="#">Separated link</a> 
«/div» 
«/li» 


另外 请 注意 ,如 第 3 章 所 提 到 的 ,用 于 下 拉 荣 单 指示 器 的 小 三 角 是 由 CSS 所 实现 的 ,Bootstrap 
中 创建 相关 小 三 角 的 SCSS 代码 保存 在 bower_components/bootstrap/scss/ 中 : 


.dropdown-toggle { 

// 自动 生成 ^ 符 号 

&::after { 
display: inline-block; 
width: 0; 
height: 0; 
margin-right: .25rem; 
margin-left: .25rem; 
vertical-align: middle; 
content: ""; 
border-top: $caret-width solid; 
border-right: $caret-width solid transparent; 
border-left: $caret-width solid transparent; 


) 


























// 避免 关闭 下 拉 时 聚焦 于 下 拉 切 换 按 钮 
&:focus { 
outline: 0; 
H 
} 

当 使 用 插件 及 相应 组 件 时 ,请 确保 项 目 中 包含 了 相应 的 SCSS 和 JavaScript 代码 。 
通过 main.scss 文件 引入 Sass 局 部 文件 ， 同 时 使 用 import scss/includes/ 
 bootstrap.scss 语句 来 引入 Bootstrap 组 件 的 SCSS 代码 。 而 JavaScript 插件 


则 通过 Gulp 任务 引入 。 


在 Sass, JavaScript 和 HTML 标记 就 位 的 情况 下 ， 导 航 条 及 其 下 拉 菜 单 应 该 像 下 面 屏 幕 截图 
中 一 样 。( 注意 ，Bootstrap 的 所 有 下 拉 菜 单 在 点 击 后 响应 。) 
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Action 
ANNE Welcome! 
Something else here Suspendisse et arcu felis, ac 
Suspendisse potenti. Ut port, 
2 Separated link fringilla felis feugiat eget. In 1 


iaculis tincidunt. Donec at uli 























熟悉 了 HTML 标记 结构 ,并且 确认 菜单 工作 正常 之 后 ， 接 下 来 我 们 要 把 All Departments X 
单 挪 到 导航 条 的 最 右 端 ， 让 它 与 其 他 菜单 项 保持 最 大 距离 。 


为 此 ， 需 要 把 相应 的 列表 项 戏 套 在 它 自己 的 无 序列 表 中 。 如 下 所 示 。 


(1) Æ All Departments 列表 项 之 前 ， 关 闭 ul class="nav" 这 个 ul 标签 ， 用 于 包含 之 前 的 
所 有 列表 项 。 

(2) 在 All Depan 列表 项 之 前 ， 再 新 建 一 个 ul 标签 ， 类 名 为 nav 和 mavbar-nav。 添 
加 了 这 个 开始 标签 后 ， 这 个 独立 的 列表 项 就 具备 了 标准 的 导航 菜单 结构 。 

(3) 除了 nav " navbar-nav 类 之 外 ， 再 添加 一 个 pull1-right 类 ， 这 是 Bootstrap 的 一 个 
工具 类 ， 用 于 把 元 素 浮 动 到 右 侧 。 


以 下 片段 中 加 粗 的 部 分 是 新 添加 的 代码 ， 紧 随 其 后 的 是 原来 的 列表 项 和 链接 : 


«ul class="nav navbar-nav"> 
{{#each productgroups)) 
{{#ifCond this 'All Departments'}}</ul><ul class="nav navbar-nav 
pull-md-right">{{/ifCond}} 
<li class="nav-item dropdown {{#ifCond this 'Shoes'}}active{{/ifCond}}"> 
<a class-"nav-link dropdown-toggle" data-toggle-"dropdown" href=" #" 
role="button" aria-haspopup="true" aria-expanded="false"> 
(( this }} 
«/a» 
«div class-"dropdown-menu"-» 
«a class-"dropdown-item" href="#">Action</a> 
«a class-"dropdown-item" href="#">Another action</a> 
«a class-"dropdown-item" href="#">Something else here</a> 
«div class-"dropdown-divider"»«/div» 
«a class-"dropdown-item" href="#">Separated link</a> 
«/div» 
gilis 
{{/each}} 
</ul> 























请 注意 ， 我 们 再 次 使 用 了 rfCona 语句 ， 确 保 </ul><ul class="nav navbar-nav pull- 
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md-right"> 片 段 仅 在 All Departments 目录 前 存在 。 


保存 修改 并 在 浏览 器 中 观察 效果 ， 若 bootstrap watch 或 gulp 命令 未 运行 ， 现 在 运行 则 
应 该 可 以 看 到 All Departments 下 拉 菜 单 已 经 浮动 到 了 导航 条 的 最 右 端 ， 如 下 所 示 。 





Bootstrappin 


Shoes ~ Clothing ~ Accessories ~ Women ~ Men ~ Kids ~ All Departments ~ 














除了 修改 HTML 代码 这 一 方案 外 ， 也 可 用 以 下 SCSS 代码 来 达到 相同 的 效果 。 


.nav-item:last-child ( 
float:right; 
} 


一 切 顺利 ! 下 面 来 添加 实用 导航 。 


6.4 添加 实用 导航 
我 们 的 设计 需要 提供 几 个 实用 的 导航 链接 ， 让 用 户 可 以 登录 、 注 册 和 查看 购物 车 。 
在 中 、 大 和 超大 的 视 口 中 ， 我 们 把 它们 放 到 页 头 区 的 右上 角 ， 如 下 图 所 示 。 





& Log In or Register W View Cart 


Bootsirappin 
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=  Dootstrappin' & P 











请 注意 ， 折 受 后 导航 条 的 配色 方案 有 所 变化 ， 之 后 我 们 将 讨论 该 效果 的 实现 。 
接 下 来 ,我 们 对 导航 条 的 样式 做 一 些 修改 。 


首先 , 在 scss/includes/ header.scss 文件 中 为 logo 留 出 更 多 的 空间 , 当 视 口 较 大 时 对 其 上 方 设 
置 额外 的 内 边 距 : 


header[role-"banner"] { 
.navbar-brand { 
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> img ( 

width: 120px; 

padding-left: $spacer-x; 

Ginclude media-breakpoint-up(md) ( 
padding-top: $spacer-y * 3; 
padding-left: 0; 
width: 180px; 


} 


还 是 在 html/includes/header.html 文件 中 ， 我 们 要 在 页 头 区 添加 实用 导航 的 标记 ， 放 在 











navbar-brand 属性 后 面 。 以 下 是 完整 的 标记 ， 开 头 是 header 标签 ， 新 增 的 代码 加 粗 了 : 


«header role-"banner"'» 
«div class-"container"» 
«button class-"navbar-toggler hidden-md-up" type-"button" 
data-toggle-"collapse" data-target-"ftcollapsiblecontent'-» 
«/button» 
«a class-"navbar-brand" href-"/"»«img src-"((root))/images/logo.png" 
alt-"Bootstrappin'"»«/a» 
«div class-"utility-nav"-» 
<ul> 
<li><a href="#" ><i class="icon fa fa-user fa-lg"></i> Log In or 
Register</a></li> 
<li><a href="#" ><i class="icon fa fa-shopping-cart fa-lg"></i> 
View Cart</a></li> 
</ul> 
«/div» 
«/div» 


headers 

关于 以 上 标记 ， 还 要 说 明 两 点 。 

口 类 utility-nav 只 是 为 了 方便 使 用 而 创建 ， 它 不 是 Bootstrap 特有 的 类 ， 也 没有 特有 
样式 。 

口 这 里 已 经 通过 fa-user 和 fa-shopping-cart 类 添加 了 Font Awesome 的 用 户 和 购物 车 


图 标 , 并 通过 fa-1g 类 把 它们 的 尺寸 增 大 了 33%。 关于 增 大 Font Awesome 图 标的 详细 说 
明 ， 请 参见 它 的 文档 : http://fontawesome.io/examples/#larger。 


保存 修改 并 在 浏览 器 中 观察 结果 , 应 该 看 到 新 添加 的 utility-nav 出 现在 了 logo AM, 4 





























下 图 所 示 。 





。 dà Log In or Register 
* 9l View Cart 
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接 下 来 ,我 们 对 布局 做 相对 位 置 的 调整 ， 也 就 是 要 应 用 一 些 定制 的 样式 。 为 此 ， 要 针对 页 头 
区 新 建 一 个 文件 以 管理 样式 。 


我 们 需要 将 .utility-narv 元 素 的 position 值 设 为 absolute， 并 将 其 置 于 右上 角 。 在 CSS 
中 ， 这 些 样式 会 被 指定 到 header[role="banner"] 中 。 将 以 下 SCSS 代码 添加 到 scss/includes/ 


_header.scss 文件 中 : 


header[role-"banner"] { 
// 页 头 区 样式 
.utility-nav ( 
position: absolute; 
top: $spacer-y; 
right: 0; 
} 
} 


然后 ， 用 以 下 步 又 优化 细节 : 


(1) 从 无 序列 表 中 移 除 圆 点 序号 ; 
(2) 将 列表 项 浮动 到 左 侧 ; 

(3) 为 链接 添加 内 边 距 ; 

(4) 移 除 鼠标 悬 停 时 的 下 划 线 效果 。 


对 应 的 代码 如 下 : 


.utility-nav ( 
ul { 
list-style: none; 
li ( 
float: left; aí( 
padding: 0 $spacer-x; 
Ginclude hover ( 
text-decoration: none; 
} 
) 
} 
} 
} 


保存 并 编译 。 在 上 述 代码 中 ， 我 们 将 链接 的 内 边 距 设置 成 了 padding: 0 $spacer-x;, 
类 似 的 效果 也 可 以 通过 添加 Bootstrap 中 的 工具 类 来 实现 。 
如 下 HTML 代码 同样 在 <a> 元 素 上 实现 了 值 为 Sspacer-x 的 左右 内 边 距 : 




















«a href="#" class="p-1-x"> 


"浏览 器 窗 口 调整 到 桌面 窗口 大 小 ， 然 后 刷新 。 应 该 能 看 到 utility-nav 类 出 现在 了 页 头 


UL 


区 的 右上 角 位 置 。 




















a 
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& Log In or Register Y View Cart 
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这 些 调 整 适合 中 、 大 视 口 。 下 面 我 们 针对 折 对 后 的 响应 式 导航 条 来 添加 样式 。 


6.5 调整 响应 式 导 航 


在 小 屏幕 中 ， 页 眉 里 的 元 素 可 能 会 出 现 重 番 。 








9 5 -— 
Bootstrappig Logt or Register Y View Cart 











我 们 需要 将 切换 按钮 移 到 导航 条 的 左 侧 。 实 现 步 又 如 下 : 
(1) 在 编辑 器 中 打开 scss/includes/_ header.scss 文件 ， 然 后 添加 以 下 SCSS 代码 : 


header[role-"banner"] ( 
.navbar-toggler { 
float: left; 
j 

} 


(2) 保存 并 编译 上 面 的 修改 ， 可 以 看 到 切换 按钮 已 经 转移 到 了 折 炙 后 导航 条 的 左 端 ， 如 下 图 
所 示 。 


























— Bootstrappin & Log In or Register — f View Cart 











一 切 顺利 。 


现在 解决 过 分 拥挤 的 问题 , 也 就 是 要 对 除 屏幕 阅读 器 之 外 的 其 他 设备 隐藏 链接 文本 。 TEUER 
后 的 导航 条 中 ， 图 标本 身 就 足以 传达 意图 了 ,何况 还 可 以 把 图 标 弄 得 更 大 一 些 。 开 始 动手 。 


(1) Æ html/includes/_header.html 文件 中 ， 用 span 标签 包围 utility-nav 类 中 每 个 链接 的 
文本 : 


«li»«a href="#" ><i class-"icon fa 
fa-user fa-1g"»«/i» «span»Log In or Register«/span»«/a»«/li» 
«li»«a href="#" »«i class-"icon fa 
fa-shopping-cart fa-lg"»«/i» «span» View Cart«/span»«/a»«/li» 


(2) 这 样 可 以 为 后 面 进一步 调整 样式 提供 基础 。 
(3) 在 _headers.scss 中 添加 针对 这 些 span 标签 的 媒体 查询 。 借 助 Sass， 可 以 精确 地 在 需要 的 
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地 方 租 套 媒 体 查询 。 在 此 要 使 用 Bootstrap 中 的 Smedia-breakpoint-down(sm) 泥 入 ,于 
max-width 查询 设置 为 小 尺寸 断 点 减 一 ， 因 为 该 情况 下 导航 条 就 会 从 折 释 变 成 扩展 状态 。 在 这 
个 媒体 查询 中 , 使 用 工具 类 sr-only 作为 混入 , 对 除 屏 幕 阅读 器 之 外 的 所 有 设备 隐藏 文本 。( 参 
见 这 个 类 的 文档 : https://getbootstrap.com/docs/4.3/utilities/screen-readers/。 ) 

(4) 除了 使 用 sr-only 混入 ， 也 可 以 通过 在 HTML 代码 中 添加 sr-only 类 来 实现 相同 的 效 
R, 使 用 sr-only-focusable 混入 和 CSS 类 sr-only-focusable, 可 以 在 sr-only 元 素 显 
示 并 获取 焦点 时 ， 隐 藏 相关 的 内 容 ， 这 对 仅 使 用 键盘 的 用 户 很 有 用 。 

(5) 代码 片段 如 下 : 


header[role-"banner"] { 
Ginclude media-breakpoint-down(sm) ( 
top: 0; 
span ( 
Ginclude sr-only; 
) 
} 
} 


(6) 这样 就 隐藏 了 span 标签 中 的 文本 ,屏幕 上 将 只 剩 图 标 ! 
C) 再 增 大 图 标尺 寸 ， 并 在 垂直 方向 增加 一 些 行 高 。 同 样 还 在 这 个 媒体 查询 中 写 样式 : 


header[role-"banner"] { 
Ginclude media-breakpoint-down(sm) ( 
top: 0; 
span { 
Ginclude sr-only; 
} 
.icon ( 
font-size: 2em; 
line-height: 1.2; 
} 











[È 























} 
} 


保存 修改 ,运行 bootstrap watch 命令 。 应 该 看 到 下 图 所 示 的 结 





三 Bootstrappin' à P 





























再 放大 、 缩 小 浏览 器 窗口 ,反复 经 过 断 点 ， 看 看 整个 页 头 区 和 导航 条 来 回 变 换 的 效果 是 不 是 
很 平滑 。 


能 有 这 人 么 一 个 可 以 高 效 构建 流畅 的 响应 式 界面 的 框架 ,很 难 不 让 人 欣喜 。 
下 面 ， 我 们 要 调整 配色 。 
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6. 


6 调整 配色 


我 们 网 站 现在 的 配色 是 标准 的 企业 网 站 颜色 : 蓝 、 红 、 灰 。 下 面 我 们 把 这 些 关 


i 色 放 到 变量 里 。 


(1) 在 编辑 器 中 打开 scss/includes/_variables.scss， 从 一 开始 的 变量 着 手 。 





(2) 先 看 一 下 目前 灰色 变量 覆盖 的 范围 。 























如 果 大 家 以 chapter5/finish 中 的 文件 为 起 点 ， 


会 发 现 





# 可 以 派 上 用 场 。 














量 适用 于 小 尺寸 屏幕 ， 而 -ma- 


我 们 继承 了 第 5 章 定 义 的 变量 。 这 些 变 量 不 光 在 第 5 章 有 用 ， 现 在 同 档 

x 

[da enanat nnana 

Ggray-darker: #222; // edited 

Ggray-dark: 4454545; // edited 

Ggray: #777; // edited 

Ggray-light: #aeaeae; // edited 

Ggray-lighter: #ccc; // edited 

Ggray-lightest: #ededed; // edited 

Goff-white: #fafafa; // edited 

(3) 在 灰色 变量 下 方 , 再 添加 品牌 色 。 修改 @brand-primary 值 , 新 增 红色 的 @brand-feature 
变量 : 

Gbrand-primary: 4$3e7dbd; // 修改 过 的 蓝 色 

@brand-feature: #c60004; // 新 增 的 红色 

(4) 下 面 调整 链接 的 悬 停 颜色 ， 使 其 比 abrand-primary 稍 浅 ( 而 不 是 稍 深 )， 它 目前 已 经 很 
RT: 

// 链接 

i 

@link-color: @brand-primary; 

@link-color-hover: lighten(Glink-color, 152); 

(5) 最 后 ,定义 导航 条 的 颜色 。 我 们 将 创建 两 套 变量 ，-xs- 变 量 
方案 则 适用 于 较 大 的 屏幕 : 

// 导航 条 


$body-color; 
FETTY 
$gray-lightest; 
S$brand-primary; 


$navbar-xs-color: 
$navbar-xs-bg: 
$navbar-md-color: 
$navbar-md-bg: 


// 导航 条 链接 
$navbar-xs-color: 
$navbar-xs-hover-color: 


$navbar-xs-color; 
$navbar-xs-color; 
darken($navbar-xs-bg, 
$navbar-xs-color; 
$navbar-xs-hover-bg; 
$navbar-md-color; 
$navbar-md-color; 





$navbar-xs-hover-bg: 52$); 
$navbar-xs-active-color: 
$navbar-xs-disabled-color: 
$navbar-md-color: 


$navbar-md-hover-color: 
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$navbar-md-hover-bg: darken($navbar-md-bg, 5%); 
$navbar-md-active-color: $navbar-md-color; 
$navbar-md-disabled-color: $navbar-md-hover-bg; 


设置 好 这 些 基本 的 颜色 变量 后 ， 就 可 以 着 手 调整 导航 条 了 。 











6.7 ”调整 折叠 后 的 导航 条 样式 


还 在 _variables.scss 中 ， 搜 索 // Navbar， 在 这 里 可 以 看 到 导航 条 用 到 的 变量 。 这 里 指定 的 
大 多 数 标准 值 对 小 视 口 中 折 县 后 的 响应 式 导 航 条 及 宽 视 口中 扩展 的 导航 条 均 有 效 。 


我 们 希望 折 半 后 响应 式 导航 条 的 背景 、 文 本 和 链接 颜色 与 默认 值 基本 一 致 , 但 在 中 及 更 大 的 
视 口 中 变 成 蓝 色 背景 、 浅 色 文 本 。 


对 于 这 一 颜色 随 视 口 大 小 而 变 的 需求 ， 我 们 将 开发 出 一 套 响应 式 的 配色 方案 。 


打开 scss/includes/ navbar.scss 文件 ， 然 后 用 以 下 代码 修改 小 视 口 中 的 默认 值 : 
// 响应 式 配 色 方 案 


.navbar ( 
background-color: $navbar-xs-bg; 
color: $navbar-xs-color; 
.nav-link ( 
Ginclude hover-focus-active ( 
background-color: $navbar-xs-hover-bg; 
} 
} 
} 


可 以 看 到 ,我 们 使 用 的 是 -xs- 变 量 。 至 于 中 或 者 更 大 的 窗口 ( 此 时 导航 条 会 在 logo 下 方 水 
平 显 示 )， 则 希望 导航 条 显示 为 蓝 色 。 再 次 使 用 Bootstrap 中 的 媒体 查询 混入 ,更改 大 视 口 中 导航 
条 的 颜色 : 


// 响应 式 配 色 方 案 
.navbar { 
background-color: $navbar-xs-bg; 
color: $navbar-xs-color; 
.nav-link { 
Ginclude hover-focus-active ( 
background-color: $navbar-xs-hover-bg; 
} 
} 
@include media-breakpoint-up(md) { 
background-color: $navbar-md-bg; 
color: $navbar-md-color; 
.nav-link { 
color: $navbar-md-color; 
Ginclude hover-focus-active ( 
background-color: $navbar-md-hover-bg; 






































定制 下 拉 菜 单 











我 们 将 再 次 借助 强大 的 Sass, 在 小 屏幕 下 定制 下 拉 菜 单 。 在 scss/includes/_navbar.scss 文件 中 
编辑 以 下 代码 : 


Ginclude media-breakpoint-down(sm) ( 
.navbar ( 
.nav-item + .nav-item ( 
margin-left: 0; 
j 
.dropdown { 
position: initial; 
j 
.dropdown-menu { 
position: initial; 
z-index: initial; 
float: initial; 
border: initial; 
border-radius: initial; 
j 
j 
j 


我 们 使 用 了 Bootstrap 中 的 媒体 查询 混入 ， 在 宽度 小 于 768 像素 的 小 屏幕 中 重 置 样式 。 将 下 


拉 沫 单元 素 的 各 属性 设置 为 初始 值 。 上 述 代码 的 效果 为 : 下拉 菜 单 的 position 恢复 为 默认 值 ， 其 
浮动 、 边 框 和 圆 角 效 果 也 被 移 除 ， 最 终 看 起 来 像 常 规 列 表 ， 如 下 图 所 示 。 























Clothing ~ 


Action 
Another action 


Something else here 


Separated link 





Accessories ~ 


漂亮 ! 接 下 来 轮 到 水 平 导航 条 了 。 








6.8 调整 水 平 导 航 条 


当 把 鼠标 移 到 导航 条 中 的 链接 上 时 ， 可 以 发 现 ， 链 接 上 的 背景 色 高 度 比 导航 条 的 高 度 要 小 。 
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Shoes ~ Clothing ~ Accessories ~ Women ~ Men ~ Kids ~ 











可 以 通过 将 内 边 距 设置 在 链接 元 素 〈 而 非 导航 条 ) 中 解决 该 问题 。SCSS 代码 示例 如 下 : 


.navbar ( 

Ginclude media-breakpoint-up(md) ( 
padding-top: 0; 
padding-bottom: 0; 

} 

.nav-link { 
padding: $spacer; 
Ginclude media-breakpoint-only (md) ( 

padding: $spacer-vy ($spacer-x / 2); 

} 


} 


修改 后 ， 导 航 条 中 的 链接 效果 应 如 下 图 所 示 。 





Shoes ~ Clothing ~ Accessories ~ Women ~ 














最 后 ， 我 们 把 文本 转换 为 大 写 形式 ， 稍 微缩 小 一 点 ， 再 加 粗 。 在 _navbarscss 中 ， 添 加 如 下 
代码 : 


.nav-link { 
padding: $spacer; 


Ginclude media-breakpoint-up(md) ( 
text-transform: uppercase; mm 
font-size: 82$; 


font-weight: bold; 





j 
} 


这 样 就 得 到 了 我 们 想 要 的 结果 。 





& Log In or Register — Yi View Cart 


Bootstroppin 


SHOES ~ CLOTHING - ACCESSORIES - WOMEN - MEN - KIDS - ALL DEPARTMENTS - 











我 们 的 页 头 和 导航 条 完工 了 ! 
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6.9 增加 对 Flexbox 的 支持 


如 第 1 章 已 经 解释 的 ，Bootstrap 4 中 以 可 选 的 形式 增加 对 Flexbox 的 支持 。 可 以 在 
scss/includes/ variables 文件 中 声明 senable-flex: true， 轻 松 地 启用 对 Flexbox 的 支持 。 由 于 
使 用 了 flex 布局 ， 因 此 需 清 除 导 航 条 容器 上 的 浮动 。 可 添加 以 下 SCSS 代码 ， 清 除 浮动 : 


header[role="banner"] { 
// 页 刷 不 使 用 Flexbox 布局 ， 所 以 必须 清除 浮动 





@if senable-flex { 
.container ( 


Ginclude clearfix(); 


} 


接 下 来 ,该 调整 页 面 主 区 域 的 内 容 了 。 


6.10 设计 复杂 的 响应 式 布局 











假设 我 们 在 刚刚 结束 的 客户 会 面 中 做 出 了 一 个 承诺 ， 要 把 主页 内 容 分 成 三 层 ， 按 重要 程度 


排序 。 


在 中 、 大 视 口 中 ， 所 有 内 容 将 分 布 在 三 栏 中 ， 如 下 图 所 示 。 





Featured Content 


fringilla felis feugiat eget. 








Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 


Learn more © 


Welcome! 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Recent Updates 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


And another thing 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Don't Miss! 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non 
purus quis elit iaculis tincidunt. 
Donec at ultrices est. 


Read more © 


Check it out 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non 
purus quis elit iaculis tincidunt. 
Donec at ultrices est. 


Read more © 


Finally 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non 
purus quis elit iaculis tincidunt. 
Donec at ultrices est. 


Read more © 
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在 较 罕 的 视 口中 ， 将 在 一 栏 中 垂直 依次 排列 。 








= Dootstrappin & 


w 





Featured Content 


Suspendisse et arcu felis, ac gravida 
turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat 
eget. 


Learn more © 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Read more © 





Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 








Read more © 








而 在 小 型 或 中 型 平板 电脑 的 视 口 中 ,并排 的 只 有 两 栏 ， 第 三 栏 水 平 放 到 它们 下 面 ， 如 下 图 
所 示 。 
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Welcome! 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


Read more © 





"e s Recent Updates 
Suspendisse et arcu felis, ac gravida turpis. 
Featured Content Suspendisse potenti. Ut porta rhoncus ligula, 


sed fringilla felis feugiat eget. In non purus 


Suspendisse et arcu felis, ac gravida 
P , 9 quis elit iaculis tincidunt. Donec at ultrices est. 


turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis Read more © 
feugiat eget. 


And another thing 


Suspendisse et arcu felis, ac gravida turpis. 


Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


Read more © 


" T 
Don't Miss! r : 
: : Check it out Finally 
Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse Suspendisse et arcu felis, ac Suspendisse et arcu felis, ac 
potenti. Ut porta rhoncus ligula, gravida turpis. Suspendisse gravida turpis. Suspendisse 
sed fringilla felis feugiat eget. potenti. Ut porta rhoncus ligula, potenti. Ut porta rhoncus ligula, 
In non purus quis elit iaculis sed fringilla felis feugiat eget. sed fringilla felis feugiat eget. 
tincidunt. Donec at ultrices est. In non purus quis elit iaculis In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. tincidunt. Donec at ultrices est. 
Read more © 
Read more © Read more © 











作为 起 点 , 我 们 已 经 有 了 三 个 等 宽 栏 的 标记 。 下 面 就 来 看 一 下 这 些 标记 ,考虑 一 下 怎么 调整 
以 符合 设计 需要 。 先 从 中 、 大 视 口 的 三 栏 布局 开始 。 
6.10.1 调整 大 屏幕 和 超大 屏幕 中 的 布局 


当前 ， st 和 超大 视 口中 ,三 栏 是 等 宽 的 ， 而 且 字 号 、 按 钮 大 小 ,还 有 颜色 都 一 样 。 结 
果 就 是 缺乏 视觉 层次 感 ， 如 下 图 所 示 。 








Welcome! Don't Missl 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. iaculis tincidunt. Donec at ultrices est. 


more O 





Recent Updates Check it out R 


Suspendisse et arcu felis, ac 


Suspendisse et arcu felis, ac gravida turpis. 
gravida turpis. Suspendisse potenti. Ut porta 


Suspendisse potenti. Ut porta rhoncus ligula, sed 7 cp A > 
Featured Content fringilla felis feugiat eget. In non purus quis elit rhoncus ligula, sed fringilla felis feugiat eget. In 
iaculis tincidunt. Donec at ultrices est. non purus quis elit iaculis tincidunt. Donec at 


Suspendisse et arcu felis, ac gravida turpis. ultrices est. 


Suspendisse potenti. Ut porta rhoncus ligula, sed And another 


fringilla felis feugiat eget. 





hin 

t g Suspendisse et arcu felis, ac 

Suspendisse et arcu felis, ac gravida turpis. gravida turpis. Suspendisse potenti. Ut porta 
Suspendisse potenti. Ut porta rhoncus ligula,sed rhoncus ligula, sed fringilla felis feugiat eget. In 
fringilla felis feugiat eget. In non purus quis elit non purus quis elit iaculis tincidunt. Donec at 
iaculis tincidunt. Donec at ultrices est. ultrices est. 


TET 
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要 实现 视觉 上 内 容 的 分 层 ， 


开始 。 


(1) 在 html/pages/index.html 中 ， 搜 索 包 含 内 容 的 section 标签 


可 以 调整 栏 帘 、 字 号 


、 按 钮 大 小 ， 


«section class-"content-primary col-md-4"-» 


元 素 宽度 的 三 分 之 一 ， 从 小 视 口 〈768 像素 ) 及 以 上 


(2) 这 里 的 类 col-md-4 表示 当前 栏 


宽度 开始 。 


(3) 我 们 想 在 大 屏幕 和 超大 视 口 (992 像素 及 以 上 ) 内 保留 


M. eu 
EA 

















(4) 把 类 co1-md-4 修改 为 col-1g-5， 如 下 所 示 ; 


«section class-"content-primary col-1g-5"'» 











| 元 素 的 5/125 
(0) 再 搜索 到 后 面 两 栏 的 开始 sect ion $ 








妇 三 栏 布局 ,而 且 希 望 第 





还 有 颜色 。 我 们 先 从 调整 栏 宽 


一 栏 比 男 两 


示 签 ,将 它们 的 类 分 别 改 为 col-1g-4 和 coi-1g-3: 


«section class-"content-secondary col-1g-4"» 


«section class-"content-tertiary col-1g-3"'» 


保存 ， 刷 新 ， 可 以 看 到 以 宽度 


分 层 的 三 栏 。 








640x480 


[EI 
Featured Content 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 





Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 


iaculis tincidunt. Donec at ultrices est. 
And another 


thing 
Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 


fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Don't Miss! 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Read more © 
Check it out 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Finally 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 











你 可 能 注意 到 中 间 和 第 
字号 。 


三 栏 的 标题 并 没有 清除 上 面 的 按钮 。 下 一 步 就 来 调整 这 些 按钮 , 还 有 
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6.10.2 ”调整 平板 视 口 的 中 型 布局 


首先 我 们 注意 到 , 在 中 型 布局 中 , 导航 条 里 诸多 的 项 目 使 得 导航 条 显得 比较 小 。 页 面 上 栏目 
会 显示 成 两 行 ， 如 下 图 所 示 。 








CLOTHING - ACCESSORIES ~ M MEN - 


ALL DEPARTMENTS - 








为 了 让 导航 条 中 的 项 目 再 次 位 于 同一 行 , 可 以 缩小 它们 的 内 外 边 距 , t RT ELVSE HE SIHCAS UTER 
的 断 点 。 


首先 ,尝试 使 用 缩小 内 外 边 距 的 方案 , 可 以 再 次 借助 强大 的 Sass, 用 编辑 器 打开 文件 并 编辑 
以 下 SCSS 代码 : 


.navbar { 
@include media-breakpoint-only (md) { 
.nav-item + .nav-item ( 
margin-left: 0; 
} 
} 
.nav-link { 
padding: $spacer; 
Ginclude media-breakpoint-only (md) ( 
padding: $spacer-y ($spacer-x / 2); 
j 
j 
} 














请 注意 ， 上 述 调 整 的 代码 都 被 封装 在 media-breakpoint-only() 混 入 中 。 该 混入 的 工作 
方式 与 之 前 接触 过 的 media-breakpoint-up 和 media-breakpoint-down 差不多 , 但 其 会 用 
媒体 查询 技术 同时 设 定 min-width 和 max-wiath， 因 此 仅 针 对 一 种 网 格 环境 有 效 。 


以 下 面 的 SCSS 代码 为 例 : 


Ginclude media-breakpoint-only (md) ( 
padding: $spacer-vy ($spacer-x / 2); 
} 


该 SCSS 代码 会 被 编译 成 以 下 CSS 代码 : 


Gmedia (min-width: 768px) and (max-width: 991px) ( 
.navbar .nav-link ( 
padding: lrem 0.5rem; 
j 
} 
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与 此 同时 , 我 们 还 可 以 使 用 medaia-breakpoint-between() 混 和 人。 该 混入 可 用 于 自行 设 定 
生效 的 断 点 间 的 网 格 范 围 。 比 如 ，@include media-breakpoint-only (sm, md) {1} 会 指定 小 
尺寸 和 中 尺寸 的 网 格 环境 。 





你 也 许 已 经 注意 到 ， 至 此 我 们 的 项 目 文件 中 已 经 包含 了 很 多 的 媒体 查询 代码 。 
Sass 本 身 并 不 提供 合并 媒体 查询 代码 的 功能 ， 因 此 最 终 编 译 出 来 的 CSS 中 也 将 

qp 包含 大 量 的 媒体 查询 语句 。 将 媒体 查询 规则 相同 的 CSS 合并 到 一 处 可 能 会 提升 
CSS 代码 的 性 能 。 可 以 使 用 Node 模块 包 css-mqpacker 来 处 理 CSS 代码 , 合并 媒 
体 查询 规则 相同 的 CSS 语句 。 





可 以 像 autoprefixer 插件 那样 ， 在 gulp-postcss 步 又 中 运行 该 模块 包 。 可 以 访问 https://www. 
npmjs.com/package/css-mqpacker , 了 解 更 多 有 关 css-mqpacker 及 将 其 集成 到 Gulp 构建 流程 方面 的 


信息 。 


除了 上 述 方案 , 也 可 以 更 改 导航 条 折 徐 的 断 点 。 首 先 ， 打开 html/includes/header.html 文件 并 
修改 导航 条 切换 按钮 的 样子 : 


«button class-"navbar-toggler hidden-lg-up" type-"button" data-toggle-"collapse" 
data-target-"fcollapsiblecontent"'-» 











代码 中 的 nidden-1g-up 类 会 让 切换 按钮 在 中 型 屏幕 中 也 能 显示 。 接 下 来 ， 将 切换 按钮 的 
显示 断 点 从 navbar-toggleable-sm 修改 为 navbar-toggleable-md， 如 以 下 HTML 片段 
所 示 : 


«div class-"container navbar-toggleable-md collapse" id="collapsiblecontent"> 


至 此 ， 即 可 在 中 型 网 格 环境 下 看 到 已 折合 导航 条 。 请 注意 , dE DEOS D TEE FA n OE HL A 
子 菜单 做 了 一 些 修改 。 你 应 对 这 些 修改 所 涉及 的 媒体 查询 代码 做 相应 的 变更 ， 在 scss/includes/ 
_navbar.scss 文件 中 做 以 下 修改 : 


.navbar { 
Ginclude media-breakpoint-down(md) ( 
.navbar-brand, 
.nav-item ( 
float: none; 











» img ( 
display: inline-block; 
} 
Jj 
// 下 拉 莱 单 
.nav-item + .nav-item ( 
margin-left: 0; 
} 
.dropdown { 
position: initial; 


} 
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.dropdown-menu { 
position: initial; 
z-index: initial; 
float: initial; 
border: initial; 
border-radius: initial; 

j 

j 
} 


同时 修改 scss/includes/_header.scss 文件 中 导航 条 类 的 断 点 : 


.navbar-brand { 
> img { 
width: 120px; 
padding-left: $spacer-x; 
Ginclude media-breakpoint-up(l1g) ( 
padding-top: $spacer-y * 3; 
padding-left: 0; 
width: 180px; 
j 
j 
} 


最 后 ,在 html/includes/header.html 文件 中 ,将 导航 条 最 右边 项 目 上 的 pull-md-right 类 替 
换 为 pull-1g-right， 结果 如 以 下 HTML 模板 片段 所 示 : 


{{#ifCond this 'All Departments'}}</ul><ul class="nav navbar-nav pull-lg-right"> 
{{/ifCond}} 


至 此 ， 导 航 条 就 已 适 配 中 型 网 格 环境 了 。 接 下 来 ,我 们 调整 分 栏 的 内 容 区 域 。 在 中 型 网 格 环 
境 下 ， 我 们 将 把 第 三 栏 放 到 其 他 栏 的 下 方 ， 并 在 每 一 栏 中 显示 相应 的 内 容 。 


内 容 区 域 的 第 一 行 由 两 栏 组 成 ,其 总 宽度 为 外 部 容器 的 5096, 而 第 二 行 则 由 三 栏 组 成 , 其 宽 
度 占据 外 部 容器 的 三 分 之 一 。 


可 以 再 用 Bootstrap 中 预定 义 的 网 格 类 来 实现 这 一 布局 ,再 次 打开 html/pages/index.html 文件 ， 
添加 适用 于 中 型 网 格 环境 的 网 格 类 : 


«section class-"content-primary col-md-6 col-1g-5"-» 

















«/section» 
«section class-"content-secondary col-md-6 col-1g-4"'» 


«/section» 
«section class-"content-tertiary col-md-12 col-1g-3"» 


«/section» 


由 于 col-1g-* 类 对 大 型 网 格 的 覆 写 效果 及 移动 优先 的 编码 规则 ， 上 述 代 码 中 的 co1-md-* 
类 仅 在 中 型 尺寸 屏幕 下 有 效 。 
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网 格 系统 中 每 一 行 会 包含 12 栏 , 因此 在 中 型 网 格 环境 下 我 们 将 拥有 24 栏 的 空间 C 两 个 md-6 
加 上 一 个 md-12 )。 这 些 栏 会 自动 分 为 两 行 ， 其 中 第 一 行 包括 两 个 (md-6 ) 栏 ， 而 第 二 行 则 由 一 
个 (md-12 ) 栏 填充 。 


接 下 来 ,该 在 中 型 网 格 环境 下 调整 第 三 栏 的 内 容 布 局 了 。Bootstrap "PIS Uere RT EU EE s 
我 们 将 使 用 骨 套 写法 把 第 二 行 中 的 内 容 分 为 等 宽 的 三 栏 。 为 了 用 默认 网 格 檬 套 内 容 , 可 以 新 建 一 
DE row 类 的 元 素 ， 并 对 它 里 面 的 元 素 设 置 col1-*-* 栏 。 该 布局 在 本 例 中 ， 可 以 将 每 一 小 栏 的 
内 容 封 装 在 以 下 HTML 结构 里 : 


«article class-"col-md-4 col-1g-12"» 

















«/article» 


除了 设置 col-md-4 类 ， 还 需要 设置 co1-1g-12 25, AMRES EAN WEE TE 
大 型 和 超大 型 网 格 环境 下 的 显示 效果 。 将 这 些小 栏 封装 在 一 个 新 的 row 元 素 中 , 第 三 栏 的 HTML 
代码 示例 如 下 : 


«section class-"content-tertiary col-md-12 col-1g-3"» 
«div class="row"> 
«article class-"col-md-4 col-1g-12"» 

«h4»Don't Missg!«/h4» 

«p»Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est.«/p» 

«p»«a class-"btn btn-primary pull-right" href="#">Read more 

«span class-"icon fa fa-arrow-circle-right"»«/span»«/a» 
</p> 
</article> 
«article class-"col-md-4 col-1g-12"> 

«h4»Check it out«/h4» 

«p»Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est.«/p» 

«p»«a class-"btn btn-primary pull-right" href="#">Read more 

«span class-"icon fa fa-arrow-circle-right"»«/span»«/a» 











«/p» 

«/article» 

«article class-"col-md-4 col-1g-12"» 
<h4>Finally</h4> 


<p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est.</p> 

«p»«a class-"btn btn-primary pull-right" href="#">Read more 

«span class-"icon fa fa-arrow-circle-right"»«/span»«/a» 
«/p» 
«/article» 
«/div» 

«/section» 


浏览 需 中 最 后 一 栏 显示 的 效果 应 如 下 图 所 示 。 














Don't Miss! Check it out Finally 

Suspendisse et arcu felis, ac Suspendisse et arcu felis, ac Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse gravida turpis. Suspendisse gravida turpis. Suspendisse 
potenti. Ut porta rhoncus potenti. Ut porta rhoncus potenti. Ut porta rhoncus 
ligula, sed fringilla felis ligula, sed fringilla felis ligula, sed fringilla felis 
feugiat eget. In non purus feugiat eget. In non purus feugiat eget. In non purus 
quis elit iaculis tincidunt. quis elit iaculis tincidunt. quis elit iaculis tincidunt. 
Donec at ultrices est. Donec at ultrices est. Donec at ultrices est. 











6.10.3 ”调整 标题 、 字 号 和 按钮 


我 们 先 来 调整 标题 ， 以 便 它们 清除 其 上 方 的 按钮 ， 目 前 这 些 按钮 都 浮动 到 了 右 侧 。 为 此 ,要 
用 到 之 前 新 建 的 用 于 管理 页 面 内 容 细节 的 文件 : _page-contents.scss。 


以 下 是 调整 步骤 。 


(1) 在 _page-contents.scss 中 ， 写 一 个 选择 符 ， 选 择 胡 套 在 Bootstrap 的 分 栏 类 中 的 n1 到 n4, 
这 里 可 以 使 用 CSS2 的 属性 选择 符 ， 同 时 只 针对 骨 套 在 类 包含 col -元 素 的 这 些 类 





本 章 后 面 还 要 设计 包含 自己 的 一 组 响应 式 分 栏 的 页 脚 , 因此 , 这 里 还 要 确保 把 规 
REER main 元 素 的 选择 符 内 。 


(D) 这 样 ， 就 可 以 选中 所 有 可 能 用 到 的 标题 标签 ， 以 便 清除 它们 的 浮动 元 素 ， 表 为 它们 添加 
一 些 内 边 距 。 


[class*e"col-"] f 
hi1, h2, h3, h4 ( 
clear: both; 
padding-top: $spacer-y; 
j 
} 


(3) 这 样 标 题 和 浮动 按钮 之 间 有 了 必要 的 分 隔 。 但 这 样 也 在 第 二 和 第 三 栏 上 方 增加 了 不 必要 
的 上 内 边 距 。 

(4) 在 下 面 的 屏幕 截图 中 ， 下 方 箭头 指出 的 是 完成 的 改进 ， 即 标题 清除 了 浮动 按钮 ， 上 方 箭 
头 指出 的 是 内 边 距 造成 的 两 栏 项 部 不 齐 的 问题 。 








Welcome! Don't Miss! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac 

Suspendisse potenti. Ut porta rhoncus ligula, sed gravida turpis. Suspendisse potenti. 

fringilla felis feugiat eget. In non purus quis elit Ut porta rhoncus ligula, sed fringilla 

iaculis tincidunt. Donec at ultrices est. felis feugiat eget. In non purus quis 
elit iaculis tincidunt. Donec at 


ultrices est. 
Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Check it out 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 


Featured Content iaculis tincidunt. Donec at ultrices est. gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla 





Suspendisse et arcu felis, ac 
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(5) 下 面 来 删除 每 栏 最 顶部 标题 的 上 内 边 距 和 上 外 边 距 。 为 此 ， 要 使 用 :first-child 选择 
符 ， 将 其 伐 套 在 标题 选择 符 内 。 这 里 使 用 的 g 组 合 符 ， 用 于 选择 这 些 标题 的 第 一 个 实例 : 


&:first-child ( 
margin-top: 0; 
padding-top: 0; 

} 


(6) 结果 就 是 去 掉 了 后 两 栏 顶 部 多 余 的 内 、 外 边 距 。 





Welcomel Don't Miss! 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac 
Suspendisse potenti. Ut porta rhoncus ligula, sed gravida turpis. Suspendisse potenti. 
fringilla felis feugiat eget. In non purus quis elit Ut porta rhoncus ligula, sed fringilla 
iaculis tincidunt. Donec at ultrices est. felis feugiat eget. In non purus quis 


elit iaculis tincidunt. Donec at 


Recent Updates 





Suspendisse et arcu felis, ac gravida turpis. Check it out 

Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse et arcu felis, ac 
fringilla felis feugiat eget. In non purus quis elit gravida turpis. Suspendisse potenti. 
iaculis tincidunt. Donec at ultrices est. Ut porta rhoncus ligula, sed fringilla 








Featured Content 


felis feugiat eget. In non purus quis 











(ERLAR SESS — PHP RS ILE TRES RER BUE SCHUICESOR AR, :first-chila 
选择 符 会 匹配 第 三 栏 中 所 有 的 n4 元 素 。 可 以 通过 在 Sass 代码 中 创建 新 的 h4 选择 符 来 解决 这 一 
问题 : 


h4 ( 
clear: both; 
padding-top: $spacer-y; 

} 

> article:first-child h4 { 
margin-top: 0; 
padding-top: 0; 

} 


(8) 不 过 , 我 们 只 想 在 中 、 大 或 超大 视 口 中 删除 上 内 、 外 边 距 , 这 时 候 主页 呈现 为 多 栏 。 显 然 ， 
应 该 把 上 面 的 样 规 则 骨 套 在 与 相应 断 点 对 应 的 媒体 查询 中 。 这 个 断 点 就 是 从 单 栏 布局 切换 到 多 栏 
布局 的 断 点 。 

(9) 换 名 话说， 需要 把 上 面 的 样式 虹 套 在 中 和 更 大 尺 才 的 窗口 中 : 


[class*-"col-"] ( 
h1, h2, h3, h4 ( 
clear: both; 
padding-top: $spacer-y; 
Ginclude media-breakpoint-up(md) { 
&:first-child ( 
margin-top: 0; 
padding-top: 0; 
} 








h4 ( 
clear: both; 
padding-top: $spacer-y; 
J 
Ginclude media-breakpoint-up(md) { 
» article:first-child h4 ( 
margin-top: 0; 
padding-top: 0; 
j 
j 
} 


通过 把 新 样式 舰 套 在 上 面 的 媒体 查询 中 ， 可 以 保留 窄 视 口 中 单 栏 布局 下 元 素 间 适当 的 间距 ， 
如 下 图 所 示 。 





Featured Content 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 


rhoncus ligula, sed fringilla felis feugiat eget. 
Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 


tincidunt. Donec at ultrices est. 


完成 了 上 述 调 整 , 接 下 来 可 以 调整 按钮 大 小 和 字号 ， 从 而 反映 内 容 的 信息 层次 了 。 下 面 就 来 
增 大 主 内 容 区 字号 和 按钮 大 小 ， 还 有 修改 颜色 。 














6.10.4” 增 大 主 栏 
首先 来 增 大 主 栏 内 容 的 字号 。 
(1) Æ Bootstrap 的 _variables.scss 文件 中 ,设置 $font -size-large 变量 的 默认 值 如 下 : 
Sfont-size-lg: 1.25rem !default; 
(2) 然后 ， 在 scss/includes/ page-contents.sess 文件 中 添加 如 下 代码 行 ， 以 利用 上 一 步 中 设 定 
的 字号 : 
.content-primary ( 


font-size: $font-size-lg; 


) 


保存 修改 ， 编 译文 件 ， 刷 新 浏览 咒 。 应 该 看 到 主 栏 文本 的 字号 增 大 了 ! 
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接 下 来 调整 按钮 的 颜色 ， 这 要 用 到 红色 的 Sbrand-feature 变量 ， 这 个 变量 是 在 本 地 文件 


scss/includes/_variables.scss 中 设 定 的 : 





Sbrand-feature: #c60004; 





还 需要 利用 Bootstrap 在 mixins/_buttons.scss 中 提供 的 方便 的 混入 button-variant ()。 5 
望 大 家 抽 点 时 间 看 看 这 个 文件 。 打 开 bower components 目录 下 Bootstrap 的 源 代 码 文件 mixins/ 
_buttons.scss， 搜 索 // Button， 可 以 看 到 以 下 面 代 码 开头 的 混入 : 


@mixin button-variant($color, $background, $border) ( 
这 个 混入 的 作用 如 下 。 


口 指定 按钮 字体 、 ne (分 别 对 应 de Jo 
口 生成 悬 停 、 焦 点 、 选 中 和 禁用 状态 的 按钮 ， 调 整 字体 颜色 、 背 景 颜色 和 边框 。 


如 果 你 有 兴趣 , 还 可 以 看 一 看 Bootstrap 在 bootstrap/ buttons.sess 中 如 何 使 用 这 个 混入 , 就 在 
注释 // Alternate buttons 的 下 面 。 以 下 是 为 默认 主 按钮 生成 的 样式 : 


// 


// Alternate buttons 
// 











.btn-primary ( 
QGinclude button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); 
} 
.btn-secondary { 
Ginclude button-variant (Sbtn-secondary-color, $btn-secondary-bg, 
sbtn-secondary-border); 
} 
.btn-info { 

Ginclude button-variant($btn-info-color, $btn-info-bg, $btn-info-border); 


} 





尺 Sbtn-ptrimary- 和 Sbtn-seconqary- 开 头 的 变量 是 在 bower components/ 
bootstrap/scss/_variables.scss 文件 中 定义 的 。 








按照 同样 的 模式 ， 只 需 简 单 四 步 即 可 生成 我 们 自己 的 定制 功能 按钮 。 


(1) 首先 ， 准 备 一 组 新 的 按钮 变量 。 在 _scssincludes/_variables.scss 文件 中 ，// Buttons FH, 
复制 三 个 sbtn-primary- 变 量 , 定制 它们 , 将 -primary- 改 为 -feature-， 并 使 用 sprand-feature 
作为 背景 颜色 : 


$btn-feature-color: #fff; 
$btn-feature-bg: $brand-feature; 
$btn-feature-border:  darken($btn-feature-bg, 5%); 


Q) 然后 ， 创 建 一 个 文件 来 保存 定制 按钮 的 样式 。 新 建 scss/includes/_buttons.scss 并 根据 
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bootstrap/ buttons.scss 中 的 .btn-primary 混入 写 一 个 下 面 这 样 的 混入 : 


.btn-feature { 
@include button-variant($btn-feature-color, $btn-feature-bg, 
$btn-feature-border); 


(3) 保存 文件 ， 并 将 其 添加 到 scss/app.sess 中 的 引入 行列 : 


Gimport "includes/carousel"; Gimport "includes/buttons"; // added 


(4) 在 html/pages/index.html 文件 中 ， 将 类 名 btn-primary 改 为 ptn-feature。 完 成 之 后 ， 
还 要 把 按钮 变 大 一 些 ， 因 此 再 添加 类 btn-19: 
«a class-"btn btn-feature btn-lg pull-right" href="#"> Learn more 


保存 并 运行 bootstrap watch 命令 , 应 该 看 到 如 下 结果 。 左 侧 主 栏 的 字号 和 按钮 都 变 大 了 ， 
而 且 使 用 了 brand- feature 颜色 。 





Welcomel Don't Miss! 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse et arcu felis, ac 
Suspendisse potenti. Ut porta rhoncus ligula, sed gravida turpis. Suspendisse potenti. 
fringilla felis feugiat eget. In non purus quis elit Ut porta rhoncus ligula, sed fringilla 
iaculis tincidunt. Donec at ultrices est. felis feugiat eget. In non purus quis 


elit iaculis tincidunt. Donec at 


ultrices est. 
Recent Updates 





Suspendisse et arcu felis, ac gravida turpis. Check it out 
oo © Suspendisse potenti. Ut porta rhoncus ligula, sed Suspendisse et arcu felis, ac 
fringilla felis feugiat eget. In non purus quis elit gravida turpis. Suspendisse potenti. 
iaculis tincidunt. Donec at ultrices est. Ut porta rhoncus ligula, sed fringilla 
Featu red Content felis feugiat eget. In non purus quis 
Suspendisse et arcu felis, ac gravida turpis. slitiaculis Bnciduni Donec at 
" A ; ltrices est. 
Suspendisse potenti. Ut porta rhoncus ligula, sed : g 
Mi en ; And another thing 
fringilla felis feugiat eget. 
Suspendisse et arcu felis, ac gravida turpis. r 
T n Suspendisse potenti. Ut porta rhoncus ligula, sed Finally 
CET fringilla felis feugiat eget. In non purus quis elit Suspendisse et arcu felis, ac 
iaculis tincidunt. Donec at ultrices est. gravida turpis. Suspendisse potenti. 


Ut porta rhoncus ligula, sed fringilla 
felis feugiat eget. In non purus quis 


elit iaculis tincidunt. Donec at 


ultrices est. 


与 此 同时 , 第 二 (中 ) 栏 的 字号 和 按钮 颜色 正 是 我 们 想 要 的 。 接 下 来 需要 修改 的 是 让 第 三 栏 
内 容 不 那么 突出 ， 使 之 在 信息 等 级 中 处 于 合适 的 位 置 。 














6.10.5 ”调整 第 三 栏 
对 第 三 栏 要 做 的 很 简单 ， 就 是 缩小 字号 ， 同 时 让 按钮 不 那么 突出 。 如 下 所 示 。 


(1) 首先 调整 字号 。 在 Bootstrap 的 _variables.scss 文件 中 , 按 以 下 方式 设置 变量 $font -size- 
sm 的 值 : 


Sfont-size-sm: .875rem !default; 








6.10 设计 复杂 的 响应 式 布 局 191 

















(2) 接 下 来 把 下 面 的 代码 行 添加 到 scss/includes/ page-contents.scss 文件 中 : 


.content-tertiary { 
font-size: $font-size-sm; 


(3) 如 果 bootstrap watch 命令 已 运行 ， 则 保存 修改 后 会 发 现 字号 变 小 了 。 
(4) 接 下 在 ， 要 编辑 html/pages/index.html 中 的 按钮 类 ， 把 btn-primary W btn- 
secondary， 并 使 用 btn-sm 类 减 小 其 尺寸 : 


«a class-"btn btn-secondary btn-sm pull-right" href="#">Read more 
(5) 这 样 就 减 小 了 按钮 尺寸 并 把 按钮 背景 变 成 了 白色 。 
(6) 再 把 按钮 的 背景 颜色 调整 为 浅 灰 色 , 同时 调整 字体 颜色 和 边框 。 TE variables.sess 文件 中 ， 
像 下 面 这 样 调整 三 个 abtn-secondaary- 变 量 的 值 : 











$btn-secondary-color: $gray; 
Sbtn-secondary-bg: $gray-lightest; 
S$btn-secondary-border: darken(S$btn-secondary-bg, 5%); 


保存 修改 ， 编 译文 件 ， 刷 新 浏览 器 。 
现在 页 面 的 视觉 层次 已 经 很 清晰 了 ， 从 左 到 右 依 次 是 主 内 容 、 次 内 容 和 第 三 栏 。 








Welcome! Don't Miss! 

Suspendisse et arcu felis, ac gravida 
turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 


640x480 fringilla felis feugiat eget. In non purus quis elit eget. In non purus quis elit iaculis 
iaculis tincidunt. Donec at ultrices est. tincidunt. Donec at ullrices est. 
Check it out 
Rece nt U pd ates Suspendisse et arcu felis, ac gravida 
Suspendisse et arcu felis, ac gravida turpis. turpis. Suspendisse potenti. Ut porta 


rhoncus ligula, sed fringilla felis feugiat 
eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 





Featured Content 


Suspendisse et arcu felis, ac gravida turpis. iil Finally 


Read more © 


Suspendisse potenti. Ut porta rhoncus ligula, sed 


H Suspendisse et arcu felis, ac gravida 
fringilla felis feugiat eget. And another thing 


turpis. Suspendisse potenti. Ut porta 
Suspendisse et arcu felis, ac gravida turpis. rhoncus ligula, sed fringilla felis feugiat 


T o Suspendisse potenti. Ut porta rhoncus ligula, sed eget. In non purus quis elit iaculis 
EDUC, fringilla felis feugiat eget. In non purus quis elit incidunt: Donec ek ulirices est. 


iaculis tincidunt. Donec at ultrices est. 


Read more © 














再 看 看 我 们 的 设计 在 罕 视 口 单 栏 布 局 时 的 样子 。 
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Featured Content 
Suspendisse et arcu felis, ac gravida 
turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat 
eget. 


Learn more © 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Read more © 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Read more © 


And another thing 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit iaculis 
lincidunt. Donec at ultrices est. 


Read more © 


Don't Miss! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Read more © 


Check it out 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Read more © 


Finally 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Read more © 
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在 窗 视 口中 ,三 栏 垂直 排 布 ， 主 内 容 在 上 ， 然 后 是 次 内 容 和 第 三 栏 。 
那么 剩 下 所 要 做 的 ， 就 是 对 设计 精 雕 细 琢 ， 以 便 让 它 在 不 同 设备 和 视 口 中 体验 更 佳 。 

















6.10.6 ”针对 多 个 视 口 进行 微调 


无 论 在 什么 视 口 中 , 通常 都 应 该 在 页 面 中 提供 一 些 留 白 。 男 外 ,每 个 区 块 的 边框 最 好 也 有 所 
标示 。 开 始 动手 。 


首先 ， 在 内 容 上 下 各 添加 一 些 内 边 距 。 为 main 元 素 添 加 一 些 上 内 边 距 ， 这 个 内 边 距 适用 于 
所 有 视 口 ， 所 以 不 必 使 用 媒体 查询 : 
main ( 
padding-top: $spacer-y; 


padding-bottom: $spacer-y * 2; 
j 


就 这 样 了 ， 主 内 容 区 收工 。 最 后 是 复杂 的 页 脚 。 





























6.11 复杂 的 页 脚 


接 下 来 我 们 要 创建 一 个 复杂 的 多 用 途 的 页 脚 ， 页 脚 包括 : 指向 网 站 重要 项 目的 三 组 链接 、 
About Us 文本 、 社 交 媒 体 图 标 ， 还 有 logoo 





6.12 ”准备 标记 
我 们 先 从 准备 标记 着 手 。 页 脚 的 目的 是 对 用 户 尽 可 能 有 用 ， 其 标记 可 以 按 如 下 步 又 来 准备 。 6 


(1) 从 第 5 章 中 的 页 脚 开 始 。 可 在 html/includes/footer.html 文件 中 找到 相关 的 HTML 标记 代码 。 
(2) 移动 logo 相关 的 HTML 代码 , 将 其 置 于 社交 媒体 链接 的 下 方 ， 并 就 其 余 的 页 脚 内 容 创 建 
新 的 引入 语句 : 


«footer role-"contentinfo"» 























((» footercolumns)) 


«div class-"container social-logo"'» 
«ul class-"social"» 

«li class-"social-item"»«a href="#" class-"social-link" 
»«i class-"fa fa-twitter"»«/i»«/a»«/li» 

«li class-"social-item"»«a href="#" class-"social-link" 
><i class="fa fa-facebook"»«/i»«/a»«/li» 

<li class="social-item"><a href="#" class="social-link" 
><i class="fa fa-linkedin"'»«/i»«/a»«/li» 

<li class="social-item"><a href="#" class="social-link" 
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><i class="fa fa-google-plus"»«/i»«/a»«/li» 
«li class="social-item"><a href="#" class-"social-link" 
><i class="fa fa-github-alt"></i></a></li> 
</ul> 


<p><a href="{{root}}index.html"><img src="{{root}}images/logo.png" 
width="80" alt="Bootstrappin'"></a></p> 
</div> 
</footer> 


(3) 然后 创建 名 为 htmlyincludes/footercolumns.html 的 HTML 局 部 文件 ， 将 其 余 的 页 脚 内 容 保 
存在 该 文件 中 。 
(A 粘贴 内 容 之 前 ， 我 们 再 准备 一 下 利用 Bootstrap 的 网 格 系统 。 为 此 ， 像 下 面 这 样 把 页 脚 区 


封装 在 div class="row" 中 : 














«div class="container"> 
<div class="row"> 


Salve /.row --» 
«/div»«!-- /.container --» 

(5) 下 面 把 内 容 粘 贴 到 位 。 

(6) 接 下 来 把 三 组 链接 及 各 自 的 标题 包 封 装 含 在 类 为 col-1g-2 的 aiv 中 。 这 样 就 保证 在 中 
及 更 大 尺寸 的 视 口 中 每 一 组 链接 的 宽度 是 父 元 素 总 宽度 的 六 分 之 一 。 加 在 一 块 , 三 组 链接 占 视 口 
宽度 的 一 半 。 

(7) 继续 把 这 一 行内 容 做 完 ， 把 About Us 标题 及 其 段落 封装 在 一 个 类 为 co1-1g-6 的 aiv 
中 ， 这 样 它 就 占据 了 剩 下 的 一 半 宽 度 。 


«div class-"about col-lg-6"> 
«h3»About Us</h3> 





























T 务必 确保 每 个 新 的 div 元 素 拥 有 对 应 的 闭合 标签 。 


(8) 保存 ， 运 行 pootstrap watch 或 gulp MS, 检查 结果 。 


执行 上 述 步 又 后 ， 应 得 到 以 下 HTML 代码 : 


«div class-"container"» 
«div class="row"> 
«div class-col-1g-2"» 

«h3»Categories«/h3-» 

«ul» 
«li»«a href="#">Shoes</a></1i> 
<li><a href="#">Clothing</a></1i> 
<li><a href="#">Accessories</a></1i> 
<li><a href="#">Men</a></1i> 
<li><a href="#">Women</a></1i> 
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«li»«a href="#">Kids</a></1i> 
«li»«a href="#">Pets</a></1i> 





</ul> 
</div> 
«div class-"col-lg-2"» 
«h3»Styles«c/h3» 
«ul» 
<li><a href="#">Athletic</a></1i> 
<li><a href="#">Casual</a></1i> 
<li><a href="#">Dress</a></1i> 
<li><a hrefz"i"-Everyday«/a»«/li» 
<li><a href="#">0ther Days«/a»«/li» 
<li><a href="#">Alternative</a></1i> 
<li><a href="#">0therwise</a></li> 
</ul> 
</div> 
«div class-"col-1g-2"'» 
«h3»Otherc/h3» 
«ul» 


«li»«a href="#">Link</a></1i> 
<li><a href="#">Another link«/a»«/li» 
<li><a href="#">Link again</a></li> 
<li><a href="#">Try this</a></li> 
<li><a href="#">Don't you dare</a></li> 
<li><a href="#">0h go ahead</a></li> 
</ul> 
</div> 


<!-- Add the extra clearfix for only the required viewport --> 
<div class="clearfix hidden-sm-down hidden-lg-up"></div> 


«div class-"about col-1g-6"> 
«h3»About Us</h3> 
«p»Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse euismod congue bibendum. Aliquam erat volutpat. 
Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec 
ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet 
turpis rutrum a. Donec semper vestibulum dapibus. 
Integer et sollicitudin 
metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus 
hendrerit.«/p» 
«p»«a class-"btn btn-secondary btn-sm pull-right" href="#">Learn more 
«span class="fa fa-arrow-circle-right"»«/span»«/a»«/p» 


«/div» 
«/div»«l-- /.roW 一 -> 
«/div»«!-- /.container --» 





根据 我 们 在 HTML 中 所 使 用 的 Bootstrap 网 格 类 ， 在 980 像素 及 更 大 尺寸 的 视 口 中 ， 页 脚 中 
的 栏 如 下 所 示 。 














Categories Styles Other About Us 
e Shoes Athletic e Link Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
e Clothing Casual e Another link euismod congue bibendum. Aliquam erat volutpat. Phasellus eget justo 
e Accessories Dress e Link again lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida 
e Men e Everyday e Try this egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper 
* Women Other Days * Don't you dare vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. 
e Kids Alternative * Oh go ahead Phasellus vel tellus id felis cursus hendrerit. 
* Pets Otherwise 
Learn more © 
90699 
Bootstrappin' 























这 是 大 和 超大 窗口 中 的 布局 。 在 超 小 的 屏幕 中 , 呈现 出 的 则 是 单 栏 布局 。 但 对 于 屏幕 尺寸 在 
768 像素 到 980 像素 之 间 的 平板 电脑 ， 我 们 的 布局 还 是 需要 调整 一 下 。 开 始 吧 。 


6.12.1 


调整 布局 适应 平板 








测试 一 下 视 口 在 768 像素 到 980 像素 之 间 时 的 布局 。Bootstrap 把 这 个 区 间 界 定 为 中 型 断 点 ， 
对 应 col-md- 网 格 类 。 在 这 个 宽度 内 ， 单 栏 布局 会 导致 不 必要 的 空 日 ， 如 下 图 所 示 。 








Categories 


* Shoes 

* Clothing 

* Accessories 
* Men 

* Women 

* Kids 

* Pets 


Styles 


e Athletic 

e Casual 

e Dress 

e Everyday 

e Other Days 
e Alternative 
e Otherwise 


Other 


e Link 

e Another link 

e Link again 

e Try this 

e Don't you dare 
* Oh go ahead 


About Us 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. 
Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec 
ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec 
semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel 
tellus id felis cursus hendrerit. 


Learn more © 
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要 改进 这 个 布局 , 可 以 让 三 组 链接 浮动 起 来 。 使 用 Bootstrap 的 类 col-md-4, 可 以 将 每 一 栏 
设置 为 三 分 之 一 宽 , 使 用 col-sm-12 将 About Us 设置 为 全 宽 : 


«div class="col-md-4 col-1g-2"» 
«div class-"col-md-4 col-1g-2"'» 


«div class-"col-md-4 col-1g-2"'» 





«div class-"about col-xs-12 col-1g-6"» 


保存 并 在 中 视 口中 测试 一 下 ， 应 该 能 看 到 下 图 所 示 的 结果 。 





Categories Styles Other 
e Shoes e Athletic e Link 
* Clothing e Casual e Another link 
e Accessories e Dress e Link again 
。 Men e Everyday e Try this 
* Women e Other Days e Don't you dare 
e Kids e Alternative 。 Oh go ahead 
e Pets e Otherwise 
About Us 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. 
Aliquam erat volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec 
ultricies metus gravida egestas. Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec 
semper vestibulum dapibus. Integer et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel 
tellus id felis cursus hendrerit. 


Learn more © 








改进 很 多 啊 ! PERE. zípURid; ENZ PER, WAE T. PEECURAIL 
包含 About Us 栏 代 码 的 第 4 个 aiv 元 素 并 没有 清除 上 方 的 浮动 栏 。 虽 然 About Us 标题 及 文本 
会 出 现在 三 个 浮动 栏 下 方 ， 但 那个 aiv 元 素 却 仍然 覆盖 在 三 栏 内 容 上 面 。 











6.12.2 ”针对 性 地 清除 


在 Bootstrap 标准 的 布局 场景 中 ,应 该 使 用 类 为 row 的 aiv 元 素 清 除 上 方 的 浮动 栏 。 但 在 此 
我 们 要 使 用 另 一 个 方案 ， 因 为 我 们 希望 这 文 个 内 容 块 仅 在 特定 的 断 点 范围 内 清除 浮动 。 


为 此 ， 可 以 在 Sass 文件 中 写 一 些 定制 的 样式 。 不 过 ， 也 可 以 直接 在 标记 中 使 用 Bootstrap 的 
响应 式 工 具 类 提供 的 针对 性 的 clearfix。 因 为 我 们 已 经 在 标记 中 指定 了 网 格 类 ， 那 就 干脆 使 用 
第 二 个 方案 。 

关于 我 们 使 用 的 这 个 方案 ， 大 家 可 以 参考 Bootstrap 的 文档 ， 地 址 在 : http://getbootstrap. 
com/layout/grid/#example-responsive-column-resets。 如 此 一 来 ， 就 要 创建 一 个 类 为 clearfix 的 
div, 并 添加 一 个 Bootstrap 的 响应 式 工具 类 , 使 其 只 在 小 屏幕 中 可 见 。 就 把 这 个 aiv 放 到 About 
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Us 栏 的 前 面 吧 : 
<!-- Add the extra clearfix for only the required viewport --» 


«div class-"clearfix hidden-sm-down hidden-l1g-up"»«/div» 
«div class-"about col-xs-12 col-1g-6"'» 


这 个 clearfix 类 会 强制 当前 元 素 清 除 上 方 的 浮动 ,而 hidden-sm-down 和 hidden-1g-up 
类 则 控制 这 个 aiv 仅 在 小 屏幕 , 也 就 是 我 们 指定 的 断 点 范围 内 可 见 。 在 其 他 断 点 区 间 , 这 个 div 
元 素 就 像 不 存在 一 样 。 
保存 以 上 修改 ， 这 次 就 会 看 到 About Us 栏 清除 了 它 上 方 的 浮动 ， 而 链接 也 可 以 点 击 了 。 
大 功 告 成 。 最 后 再 稍微 修整 几 处 。 



































6.12.3 ”修整 细节 
对 于 页 和 脚 ， 我 们 还 想 再 修整 几 个 地 方 ， 包 括 : 


口 修整 三 组 链接 的 外 观 ; 
a 调整 内 外 边 距 ; 
口 反 转 配色 方案 ， 与 导航 条 颜色 保持 一 致 。 


要 完成 以 上 工作 , 得 写 一 些 定制 的 样式 。 我 们 遵照 层 受 原理 , 先 写 一 些 针对 页 脚 的 通用 规则 ， 
然后 再 过 渡 到 特殊 规则 。 


(1) 在 编辑 器 中 打开 _footer.scss 文件 以 添加 针对 页 脚 的 定制 样式 。 
(2) 在 这 个 文件 里 ， 可 以 看 到 第 5 章 的 一 些 初始 规则 。 包 括 为 页 脚 添 加 的 内 边 距 ， 以 及 针对 
社交 媒体 图 标 ， 还 有 页 脚 中 logo 的 样式 规则 。 
(3) 现在 开始 添加 针对 复杂 页 脚 的 样式 。 首 先 ， 缩 小 页 脚 字 号 ， 反 转 配 色 与 导航 条 对 应 一 一 监 
背景 ， 浅 色 文 本 。 我 们 先 设 置 成 这 样 的 颜色 ， 然 后 再 把 v TREO — 。 为 此 ， 就 要 使 用 
Bootstrap 的 _variables.scss 中 的 适当 的 变量 以 及 scss/includes/ variables.sess 本 地 文件 ， 包 括 


$font-size-sm, $navbar-md-bg 和 $navbar-md-color。 










































































footer[role-"contentinfo"] ( 
padding-top: 24px; 
padding-bottom: 36px; 
font-size: $font-size-sm; 
background-color: darken($navbar-md-bg, 182); 
color: darken($navbar-md-color, 182); 


} 





&5 这 里 及 后 面 的 规则 ， 都 要 髓 套 到 footer[role="contentinfo"] 选 择 符 下 。 
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(4) 接 下 来 调整 链接 和 按钮 ， 以 适应 新 的 配色 。 同 样 要 把 规则 般 套 到 footer [role= 
"contentinfo"] 选 择 符 下 : 


footer[role-"contentinfo"] ( 
a ( 
color: $navbar-md-color; 
Ginclude hover-focus-active ( 
color: $navbar-md-hover-color; 
} 
} 
.btn-secondary { 
color: darken($navbar-md-bg, 18$) !important; 
) 
} 


(5) 下 面 是 四 个 n3 标题 ， 调 整 它们 的 字号 ， 去 掉 下 外 边 距 ， 并 把 文本 转换 成 大 写 : 


footer[role-"contentinfo"] ( 
h3 ( 
font-size: 120$; 
margin-top: $spacer-y; 
margin-bottom: 4px; 
text-transform: uppercase; 




















} 


(6) 然后 ， 再 去 掉 链 接 列 表 前 的 项 目 符号 ,调整 它 们 的 内 、 外 边 距 : 


ul ( 
list-style: none; 
padding: 0; 


margin: 0; 


} 


(7) 可 以 令 logo 和 社交 媒体 图 标 居中 : 


footer[role-"contentinfo"] ( 
.Social-logo ( 
text-align: center; 
} 
} 


(8) 最 后 ， 调 整 社交 媒体 图 标 。 就 是 添加 一 些 上 内 边 距 ， 调 整 一 下 颜色 ， 以 便 与 新 配色 方案 
更 协调 。 因 为 使 用 的 是 Font Awesome 图 标 ， 所 以 只 要 调整 颜色 和 背景 颜色 的 值 即 可 : 


.Social-link { 
display: inline-block; 
font-size: 18px; 
line-height: 30px; 
Ginclude square(30px); // see includes/mixins/ size.scss 
border-radius: 36px; 
background-color: darken($navbar-md-bg, 27%); 









































color: darken($navbar-md-color, 182); 
margin: 0 3px 3px 0; 
Ginclude hover-focus ( // bootstrap/scss/mixins/ hover.scss 
text-decoration: none; 
background-color: darken($navbar-md-bg, 32%); 
color: $navbar-md-hover-color; 


} 














就 这 样 了 。 保 存 ， 运 行 bootstrap watch 命令 ， 好 好 欣赏 吧 ! 以 下 是 页 脚 在 大 和 超大 视 口 
中 的 结果 。 


OTHER 
Link 
Another link 
Link again 


Women 
Kids CI 





在 中 视 口 中 的 效果 如 下 。 


CATEGORIES SLES OTHER 
Shoes Athletic Link 

Clothing Casual Another link 
Accessories Dress Link again 
Men Everyday Try this 
Women Other Days Don't you dare 
Kids Alternative Oh go ahead 
Pets Otherwise 











在 超 小 屏幕 和 小 视 口 中 的 效果 如 下 。 
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Shoes 


Clothing 
Accessories 
Men 
Women 
Kids 

Pets 


STYLES 
Athletic 
Casual 
Dress 
Everyday 
Other Days 
Alternative 
Otherwise 


OTHER 

Link 

Another link 
Link again 
Try this 

Don't you dare 
Oh go ahead 


AB 








不 错 嘛 ! 我 们 的 页 脚 其 实 挺 复杂 的 ， 内 容 多 ， 又 适 配 了 超 小 、 小 、 中 、 大 、 超 大 的 窗口 。 


6.13 ”小结 


通过 本 章 的 项 目 ， 我 们 又 掌握 了 一 些 使 用 Bootstrap 的 新 技术 。 我 们 为 页 面 的 主 内 容 设计 了 
响应 式 布 局 , 使 三 栏 内 容 主 次 分 明 。 在 页 面 项 部 , 我 们 创建 了 复杂 的 的 响应 式 导 航 条 , 使 其 在 中 、 
大 和 超大 视 口中 出 现在 logo 和 banner 的 下 方 ， 而 在 小 屏幕 中 又 能 折 全 成 移动 端 友好 的 样式 。 页 
面 的 页 脚 区 域 有 效 地 组 织 了 多 个 链接 块 ， 还 有 跨 视 口 的 文本 段落 。 


WE! 下 一 章 ， 我 们 将 以 上 述 技术 为 依托 ， 为 这 个 网 站 的 电子 商务 模块 设计 一 个 产品 页 面 。 














电子 商务 网 站 








构建 了 企业 网 站 主页 之 后 ， 接 下 来 就 可 以 考虑 设计 一 个 在 线 商店 了 。 
本 章 的 设计 以 上 一 章 的 设计 为 基础 ， 只 是 添加 了 一 个 包含 如 下 元 素 的 新 页 面 : 


口 包含 商品 小 图 、 标 题 和 说 明 的 产品 网 格 ; 
a 位 于 左 侧 的 边栏 ， 用 于 按 类 别 、 品 牌 等 筛选 商品 ; 
口 方便 用 户 清单 导航 的 面包 眉 和 分 页 导航 。 














大 家 可 以 先 看 一 看 Zappos ( http:/www.zappos.com ) 和 Amazon ( http://www.amazon.com ) 的 
网 站 ， 搜 索 或 者 浏览 一 下 其 中 的 商品 。 本 章 所 要 创建 的 页 面 ， 就 包含 与 之 类 似 的 商品 网 格 。 


完成 后 的 商品 页 面 在 中 、 大 、 超 大 屏幕 中 的 效果 应 该 如 下 图 所 示 。 




















Bootstrappin’ 


SHOES 


CLOTHING 


Home / Parent Category 


Product Category Name with ex, 


Narrow your selection 


Clearance 


Sale 


View clearance 
items 





Categories 

CO Option 1 O Option 2 
CO Option 3 O Option 4 
C Option 5 O Option 6 
C Option 7 C) Option 8 
OOption9 口 Option 10 
Brands 

OOption 1 O Option 2 
CO Option 3 O Option 4 
COption 5 O Option 6 
COption 7 O Option 8 
O Option 9 C Option 10 


Another Filter 


Ooption 1 O Option 2 
DOption 3 O Option 4 
OOption 5 O Option 6 
DOption 7 O Option 8 
D Option 9 O Option 10 


ACCESSORIES 








Product Title 

This text describes the above product a 
itle not too much but just enough or 
maybe a little more 


View this product © 


300x20€ 


Exceptional Product Title 
This text describes the above product a 
itle not too much but just enough 


View this product © 





Longer Product Title 


This text describes the above product a 
little not too much 


View this product © 


THER 

Link 

Another link 

Link again 

Try thi 

Don't you dare 
h go ahead 


y f 


& Log In or Register 


Search | 


MEN KIDS 





300x200 


Longer Product Title 
This text describes the above product a 
little not too much 





View this product © 


300x200 


Even Longer Product Title 


This text describes the above product a 
little not too much but just enough -- or 





maybe we'll go on even longer on this 
one just because its fun and, well, this 
product just really deserves it 





View this product © 


300x200 


Even Longer Product Title 
This text describes the above product a 
little not too much but just enough -- or 
maybe we'll go on even longer on this 
one just because it's fun and, well, this 
product just really deserves it! 





View this product O 


in G* e$ 


在 超 小 屏幕 上 ， 我 们 希望 商品 页 面 变 成 如 下 所 示 的 单 栏 布局 。 


ALL DEPARTMENTS 





Even Longer Product Title 


This text describes the above product a 
little not too much but just enough -- or 
maybe we'll go on even longer on this 
one just because it's fun and, well, this 
product just really deserves it! 


View this product © 


300x200 


Product Title 


This text describes the above product a 
little not too much but just enough or 
maybe a little more 


View this product © 





300x200 


Product Title 


This text describes the above product a 
little not too much but just enough or 
maybe a little more 


View this product © 


Learn more © 


P View Cart 
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= Bootstrappin 名 己 


Home / Parent Category 


Product Mera 
Mamaa li 


Narrow your selection EJ 


300x200 


Product Title 
This text describes the above product a little not too 
much but just enough or maybe a little more 


View this product © 


300x200 


Longer Product Title 
This text describes the above product a little not too 
much 

















Bootstrap 为 完成 本 章 的 设计 提供 了 很 好 的 起 点 , 在 此 基础 上 , 我 们 要 使 用 Sass 完成 调整 工作 。 


7.1 商品 页 面 的 标记 


本 章 的 练习 文件 可 以 在 文件 夹 chapter7/start 中 找到 。 这 个 项 目 直接 以 第 6 章 的 设计 为 基础 ， 
如 果 对 有 的 项 目 文件 不 理解 ， 请 参考 第 6 章 。 








人 本 书 练习 文件 可 以 在 这 里 下 载 : http://packtpub.com/support。 
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继续 阅读 前 ， 先 运行 bower install 和 npm install 命令 。 对 本 章 而 言 ， 只 有 一 个 文件 
是 新 的 ， 那 就 是 html/pages 文件 夹 下 的 products.html。 



































L— html 


E pages 
E index.html 
products .html 

















在 编辑 器 中 打开 products.html， 看 一 下 其 中 的 标记 及 其 内 容 。 














不 一 样 的 地 方 在 main role="main" 元 素 中 ， 这 个 元 素 中 包含 的 新 内 容 按 先后 顺序 是 : 


口 用 无 序列 表 生 成 的 面包 居 导 航 链 接 ; 

口 用 hl 表示 的 页 面 标题 ; 

口 一 系列 用 于 筛选 商品 的 选项 ; 

O 九 种 商品 ， 分 别 带 有 小 图 、 标 题 、 说 明和 按钮 ; 

O 用 无 序列 表 生 成 的 分 页 导航 链接 ， 位 于 商品 之 下 ， 站 点 页 脚 之 上 。 




















如 果 你 运行 bootstrap watch 命令 并 在 浏览 器 中 打开 http://localhost:8080/products.html， 
会 发 现 很 多 地 方 都 没有 完成 。 面 包 习 看 起 来 还 不 像 面包 习 ， 筛 选 选项 还 是 一 串 无 序列 表 ， 商 品 项 
布局 也 不 整齐 (有 的 商品 甚至 错位 )， 等 等 。 



































面 对 这 个 乱糟糟 的 局 面 是 不 是 有 点 手足 无 措 了 ? 不 要 紧 ， 下 面 我 们 马上 就 来 做 点 什么 。 

















O 首先 要 应 用 Bootstrap 内 置 的 面包 恨 、 页 面 标题 和 分 页 导航 的 样式 ， 再 定制 它们 。 

口 然后 ， 我 们 要 改进 九 个 商品 项 的 布局 ， 改 进 Bootstrap 的 网 格 系统 ， 让 这 些 网 格 在 不 同 断 
点 切换 时 保持 视觉 上 的 整齐 划一 。 

口 最 后 ， 就 是 要 调整 筛选 选项 的 样式 ， 主 要 是 增强 它们 的 布局 ， 再 使 用 Font Awesome 图 标 
作为 复 选 框 。 


























i81] bootstrap watch 或 gulp 命令 ,并 在 浏览 器 中 打开 http://localhost:8080/products.html。 
保存 Sass 或 HTML 模板 文件 后 ,浏览 器 就 会 自动 刷新 。 


有 了 规划 ， 下 面 就 动手 吧 。 
7.2 ”面包 届 、 页 面 标题 和 分 页 导航 


接 下 来 ,我 们 要 把 Bootstrap 的 样式 应 用 到 面包 悄 、 页 面 标题 和 分 页 导航 ,然后 再 定制 它们 ， 
以 适应 我 们 的 设计 。 
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(1) 在 编辑 器 中 打开 products.html。 

(2) 找到 位 于 页 面 标题 ni 上 方 的 有 序列 表 ， 为 ol 标签 添加 类 breadcrumb， 然 后 为 最 后 一 
个 列表 项 添加 类 active， 如 下 所 示 : 这 两 个 类 对 应 相关 Bootstrap 的 面包 悄 样式， 相关 文档 请 参 
考 这 里 : http://v4-alpha.getbootstrap.com/components/breadcrumb/。 保 存 并 刷新 浏览 器 。 应 该 能 
到 如 下 图 所 示 的 效果 。 











Home / Parent Category 











«ol class-"breadcrumb"-» 
«li class-"breadcrumb-item"»«a href-"/"-Homec/a»«/li» 
«li class-"breadcrumb-item"»«a href="#">Parent Category«c/a»«/li» 
«li class-"breadcrumb-item active"»Current Category«/li» 

</ol> 


(G3) 接 下 来 定制 面包 居 的 设计 ， 去 掉 浅 灰色 背景 和 多 余 的 内 边 距 。 


口 把 padding 设置 为 0， 完 全 删除 background-color。 
口 在 scss/ includes 目录 下 创建 名 为 breadcrumb.scss 的 Sass 局 部 文件 ， 并 添加 以 下 SCSS: 


.breadcrumb { 
padding: 0; 
background-color: initial; 


} 


(4) 别 忘 了 在 app.scss 文件 中 引入 刚 创建 的 new _breadcrumb.scss 这 个 局 部 文件 : 


// 组 件 

Gimport "includes/breadcrumb"; 

(5) 下 面 是 页 面 标题 。 Bootstrap IJ A Til bjudi ms EAEEREN page-header 的 aiv 标签 中 。 
可 在 新 建 的 scss/includes/ page-header.scss 局 部 文件 中 编写 page-header 类 相关 的 SCSS 代码 : 
请 注意 ， 需 要 在 scss/includes/_varaibels.scss 文件 中 声明 变量 spage-header-border-color， 
同时 在 主 文 件 app.scss 里 引入 sess/includes/ page-header.scss 局 部 文件 。 


// 页 面 页 局 















































.page-header { 
padding-bottom: ($spacer / 2); 
margin: $spacer 0 ($spacer / 2); 
border-bottom: 1px solid $page-header-border-color; 


) 

(6) 我 们 按照 文档 来 调整 标记 。 对 于 标题 , 我 们 会 使 用 含 Bootstrap 类 display-* 的 ni 标签 。 
为 了 利用 Bootstrap 给 标题 注释 添加 的 样式 , 再 在 含 cext-muted 类 的 sma11 标签 中 添加 一 些 文 
本 内 容 : 








«div class-"page-header"'» 

«hl class-"display-5"»Product Category Name «small class-"text- 
muted"»with explanatory text«/small»«/h1» 
</div> 


这 样 就 会 得 到 如 下 所 示 的 结果 。 





Product Category Name 











(7) 有 关 Bootstrap 中 排版 和 标题 相关 的 CSS 类 ， 可 以 访问 网 址 http://v4-alpha.getbootstrap. 
com/content/typography/Zheadings 以 获取 更 多 的 信息 。 

(8) 最 后 是 分 页 导航 。 相 关 的 标记 就 在 关闭 的 main 标签 ( </main> ) 稍微 靠 上 一 点 。 在 这 
个 标题 之 上 ， 依次 是 . container, .row 和 .products-grid 的 关闭 div 标签 


«/div»«!-- /.products-grid --» 
«/div»«!-- /.row --» 
«/div»«!-- /.container --» 
«/main» 


Bootstrap 中 分 页 导航 样式 的 文档 在 这 里 : http;//getbootstrap.com/components/Zpagination, 9 
用 分 页 导航 样式 ， 只 需 把 class="pagination" 添 加 到 关闭 的 .prodqucts-griad 标签 之 上 的 
ul 标签 : 


«ul class-"pagination"- 
«li class-"page-item"- 
«a class-"page-link" href="#" aria-label-"Previous"'- 
«span aria-hidden-"true" class-"fa fa-chevron-left"»«/span» 
<span class-"sr-only"»Previous«c/span» 











</a> 
</li> 
<li class="page-item active"> 

<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a> 
</li> 
<li class="page-item"><a class="page-link" href="#">2</a></li> 
<li class="page-item"><a class="page-link" href="#">3</a></li> 
<li class="page-item"><a class="page-link" href="#">4</a></li> 
<li class="page-item"><a class="page-link" href="#">5</a></li> 
<li class="page-item"> 

<a class="page-link" href="#" aria-label="Next"> 





<span aria-hidden="true" class="fa fa-chevron-right"></span> 
<span class="sr-only">Next</span> 
</a> 
«/li» 
«/ul» 


导航 中 链接 的 HTML 标记 可 能 含有 多 个 不 同 的 CSS 类 ， 用 于 设 定 该 链接 所 处 的 状态 。CSS 
类 active 表明 当前 链接 处 于 被 选中 的 状态 ,而 disabled 类 则 可 以 禁用 链接 ,禁用 的 项 的 HTML 
代码 如 下 所 示 : 
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«li class-"page-item disabled"> 
«a class-"page-link" href="#" tabindex-"-1" aria-label-"Previous"- 
«span aria-hidden-"true"»&laquo;«/span» 
«span class-"sr-only"»Previous«/span-» 
«/a» 
</li> 


禁用 的 项 和 选中 的 项 都 是 不 可 点 击 的 。 可 以 使 用 CSS 类 pagination-19 X pagination- 
sm， 调 整 分 页 导航 组 件 的 大 小 : 


«ul class-"pagination pagination-1lg"-» 








«/ul» 

另外 请 注意 ，Bootstrap 支持 可 访问 性 。 导 航 中 包含 了 多 个 aria-* 属 性 。 无 障碍 富 互联 网 应 
用 C Accessible Rich Internet Applications, ARIA ) 是 一 组 特殊 的 可 访问 性 属性 ， 可 用 于 任何 标记 
尤其 是 HTML 标记 。 可 以 访问 W3C 官方 网 站 地 址 https://www.w3.org/TR/html-aria/, Y fft 5E 
X ARIA 的 信息 。 包 含 Bootstrap 类 sr-only 的 元 素 会 为 屏幕 阅读 器 提供 额外 的 信息 。 























对 于 Next 和 Prev, 原来 的 标记 中 已 经 应 用 了 类 为 a-chevron-left 和 a-chevron- 
B right 的 span 标签 ,以 使 用 Font Awesome 图 标 。 结果 见 如 下 所 示 的 屏幕 截图 。 


J BEHEE 


(9) 下 面 让 分 页 导航 在 网 格 下 方 居中 。 首 先 ， 把 它 封 装 在 一 个 父 aiv 标签 中 ， 给 这 个 标签 一 
个 row 类 以 保证 它 清除 上 方 内 容 ， 然 后 添加 一 个 合适 的 Bootstrap 类 text-xs-center。 其 中 的 
xs 意味 着 该 类 适用 于 超 小 型 及 更 大 的 网 格 环境 : 

«nav class-"text-xs-center"'- 


«ul class-"pagination"» 
«lie uix 



































«/ul» 
</nav> 


7.3 调整 商品 网 格 


在 继续 深入 前 , 你 应 该 已 经 注意 到 , 由 第 6 章 中 holderjs 所 提供 的 占 位 图 片 并 不 是 响应 式 的 。 
可 以 在 app.sess 文件 中 添加 以 下 几 行 SCSS 代码 ， 使 所 有 的 图 片 默认 即 具备 响应 式 的 效果 : 
// 使 图 表 默 认为 响应 式 
img ( 
MORS .img-fluid; 
) 


上 述 过 程 在 第 1 章 已 经 有 过 描述 。 这 一 操作 对 所 有 的 图 片 均 有 影响 。 因 此 ，logo 图 标 会 忽略 
我 们 之 前 在 scss/includes/ header.sess 文件 中 所 设置 的 宽度 ， 也 变 成 响应 式 。 为 了 解决 这 一 问题 ， 
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可 在 app.scss 文件 中 将 上 述 代码 置 于 headerscss 引 入 文件 之 前 。 

在 将 所 有 的 图 片 变 为 默认 响应 式 后 ， 还 应 检查 页 脚 中 的 logo 图 标 。 可 以 看 到 ，logo 不 再 居 
中 显示 。img-fluia 类 会 将 图 片 变 为 块 级 元 素 ， 因 此 也 就 无 法 用 text-align:center; 声 明 来 
进行 居中 。 可 用 以 下 CSS 代码 再 次 实现 logo 居中 的 效果 : 
































.Social-logo { 
img { 
margin 0 auto; 
} 
} 


接 下 来 ， 我 们 要 把 商品 网 格调 整 到 位 。 在 开始 前 ， 将 商品 网 格 部 分 的 代码 移 到 一 个 单独 的 
HTML 模板 中 。 创 建 名 为 html/includes/products-grid.html 的 新 HTML 局 部 文件 。 
在 该 文件 中 ， 用 以 下 代码 保存 商品 网 格 信息 : 


«div class-"products-grid col-md-9"> 
((» products-grid }} 
«/div» 


仔细 看 一 看 每 个 商品 项 的 标记 ， 你 会 发 现 它们 都 有 一 个 类 : col-sm-4: 

«div class-"product-item col-sm-4"-» 

这 个 类 虽然 起 到 了 约束 每 个 商品 项 宽度 的 作用 , 同时 还 能 将 诸 栏 内 容 封 装 在 一 行 中 , 但 整个 
网 格 看 起 来 仍然 不 尽 如 人 意 。 


主要 问题 是 每 个 商品 项 的 高 度 不 确定 。 因 此 ，Bootstrap 网 格 组 件 在 向 左 浮动 所 有 商品 项 时 ， 
后 面 的 商品 项 就 有 可 能 挤 到 前 面 的 商品 项 中 。 结 果 整 个 布局 显得 破碎 不 齐 ， 如 下 图 所 示 。 





















































Exceptional 
Product Title 


This text describes the above 
product a little not too much but just 
enough 


View this product © 





Even Longer 
Product Title 


This text describes the above 
product a little not too much but just 
enough -- or maybe we'll go on 
even longer on this one just 
because it's fun and, well, this 
product just really deserves it! 


View this product © 


Product Title 


This text describes the above 
product a little not too much but just 
enough or maybe a little more 


View this product © 


Longer Product 
Title 
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目前 ,在 中 、 大 或 超大 视 口 中 ,第 4~7 个 商品 由 于 高 度 不 等 ,浮动 后 没有 对 齐 。 对 于 这 一 高 
度 不 等 所 导致 的 问题 ， 可 以 使 用 额外 的 aiv 元 素 , 配合 clearfix 及 其 他 响应 式 工具 类 来 解决 。 
关于 clearfix 和 响应 式 工具 类 ， 可 以 回顾 第 1 章 的 内 容 。 

接 下 来 解决 这 一 布局 问题 。 我 们 应 在 每 三 个 商品 项 后 清除 浮动 。 可 编辑 html/pages/products. 
html 文件 ， 每 三 个 商品 项 后 就 添加 以 下 HTML 代码 片段 : 


<!-- Add the extra clearfix for only the required viewport --> 
«div class-"clearfix hidden-sm-down"»«/div» 


对 于 中 尺寸 的 屏幕 ,我 们 希望 每 一 行 包含 两 个 商品 项 ; 而 对 于 大 或 超大 的 屏幕 来 说 ， 则 希望 
一 行 中 包含 3 个 商品 项 。 可 以 在 HTML 文件 中 找到 商品 项 相关 的 标签 ,替换 其 所 使 用 的 CSS 类 ， 
实现 这 一 效果 : 


























«div class-"product-item col-md-6 col-1g-4"-» 


s 类 ,每 个 商品 都 会 在 超 小 和 小 视 口中 占据 一 半 的 空间 ,而 在 中 和 大 视 口中 占据 三 分 








上 述 修改 也 意味 着 我 们 必须 蔡 换 和 扩展 响应 式 栏 ， 如 下 所 示 。 


(1) 每 三 个 商品 项 后 ，HTML 代码 如 下 : 


<!-- Add the extra clearfix for only the required viewport --> 
«div class-"clearfix hidden-md-down"»«/div» 


(2) 而 每 两 个 商品 项 后 则 会 出 现 以 下 HTML: 


<!-- Add the extra clearfix for only the required viewport --> 
«div class-"clearfix hidden-sm-down hidden-l1g-up"»«/div» 


(3) 如 此 一 来 ， 在 第 6 个 商品 项 后 会 出 现 以 下 HTML 代码 : 


<!-- Add the extra clearfix for only the required viewport --> 
«div class-"clearfix hidden-md-down"»«/div» 
«!-- Add the extra clearfix for only the required viewport --> 


«div class-"clearfix hidden-sm-down hidden-l1g-up"»«/div» 


(4) 将 上 一 步 中 的 HTML 代码 调整 为 : 


<!-- Add the extra clearfix for only the required viewport --» 
«div class-"clearfix hidden-sm-down"- 


(5) 至 此 ， 在 中 尺寸 的 视 口 中 ， 商 品 项 会 按 两 栏 的 方式 布局 。 
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300x200 300x200 
Product Title Longer Product 
This text describes the above Title 
produci Amig T d but just This text describes the above 
Prog D Rye a eo RO product a little not too much 
View this product O Viewlhs podud o 











(6) 而 在 大 和 超大 视 口中 ， 网 格 则 会 转变 成 三 栏 布 局 。 





300x200 300x200 300x200 
Product Title Longer Product Even Longer 
This text describes the above Title Product Title 
iin aito I "n but just This text describes the above This text describes the above 
CRIOUgIT Or MAYDO a Up mOra product a little not too much product a little not too much but just 
View this product © enough -- or maybe we'll go on 
View this product © even longer on this one just 


because it's fun and, well, this 
product just really deserves it! 





View this product © 











C) 我 们 的 任务 就 是 要 调整 网 格 系统 ， 增 强 所 有 网 格 的 视觉 效果 。 调 整 之 后 ， 马 上 就 解决 布 





局 的 问题 。 
(8) 因为 要 写 定制 的 样式 ， 所 以 还 要 用 编辑 器 创建 并 打开 sccs/includes/_products-grid.scss， 将 


其 引入 到 app.scss 文件 中 。 
(9) 下 面 写 一 些 样式 ， 调 整 图 片 宽度 、 字 号 、 内 边 距 和 外 边 距 ， 代 码 如 下 ; 





.product-item ( 
padding-bottom: ($spacer-y * 2); 
h2 ( 

font-size: $font-size-1g; 
line-height: $1line-height-1g; 
padding: 0; 

margin-top: ($spacer-y / 7); 
margin-bottom: ($spacer-y / 8); 


pl 
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font-size: $font-size-sm; 
line-height: $1line-height-sm; 
color: $gray; 
j 
} 


(10) 以 上 样式 的 作用 如 下 : 


口 为 每 个 商品 项 底部 添加 一 些 内 边 距 ; 

O 减 小 hn2 的 字号 到 sfont-size-1g; 

口 减 小 p 的 字号 到 $font-size-sm; 

口 减 小 h2 的 内 边 距 ,使 用 !important 保证 覆盖 我 们 在 标准 页 面 中 应 用 的 冲突 规则 ; 
Q 设置 p 的 字体 颜色 为 Sgray。 


保存 新 样式 ， 运 行 boot strap watch 或 gulp 命令 。 尽 管 此 时 的 布局 依然 破碎 ,但 商品 项 
样式 的 整体 效果 已 经 大 为 改观 ， 如 下 图 所 示 。 




















Product Title 

This text describes the above product a 
little not too much but just enough or 
maybe a little more 


View this product © 


Longer Product Title 
This text describes the above product a 
little not too much 


View this product © 


Even Longer Product Title 
This text describes the above product a 
little not too much but just enough -- or 
maybe we'll go on even longer on this 
one just because it's fun and, well, this 
product just really deserves it! 








View this product O 





看 着 真是 一 种 享受 啊 。 


别 忘 了 Card 模块 


在 上 一 节 中 ,我们 用 Bootstrap 里 的 Grid 模块 搭建 了 商品 网 格 。 除 了 这 种 方式 ， 也 可 以 用 
Bootstrap 中 新 的 Card 模块 来 实现 相同 的 效果 。 每 一 张 Card 模块 中 的 卡片 都 包含 了 卡片 头 、 卡 片 
脚 和 上 下 方 的 图 片 标题 。 在 第 4 章 创建 彻 体 网 格 布局 时 ， 你 已 经 见 过 对 Card 模块 的 使 用 了 。 


首先 ， 创建 一 个 名 为 html/includes/product-grid-cards.html 的 HTML 局 部 文件 ， 使 用 Card 模 
块 重建 产品 模块 。 每 一 张 卡 片 的 HTML 代码 如 下 : 


«div class="card"> 
«a href="#"><img data-src-"holder.js/300x200?auto-yes" 
alt-"sample product" /»«/a» 
«div class-"card-block"'- 
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«h4 class-"card-title"»«a href="#">Product Title«c/a»«/h4» 
«p class-"card-text"»This text describes the above product a 
little not too much but just enough or maybe a little more</p> 
«a class-"btn btn-secondary btn-sm pull-sm-right" href="#">View 
this product «i class="fa fa-arrow-circle-right"»«/i»«/a» 
</div> 
</div> 


在 Bootstrap 中 ， 可 以 用 分 组 或 分 层 的 方式 组 织 卡片 。 在 本 例 中 ， 我 们 将 使 用 分 层 的 方法 。 
分 层 组 织 时 ， 每 一 张 卡片 都 同 高 等 宽 ， 彼 此 之 间 也 不 粘连 。 以 下 是 分 层 组 织 卡片 的 HTML 结构 : 


«div class="card-deck-wrapper"> 
«div class-"card-deck"» 
«div class-"card product-item"» 
«/div» 
«div class-"card product-item"» 








使 用 时 需 将 每 三 张 卡片 封装 在 一 个 分 层 封装 容器 里 。 


在 上 述 做 法 中 ， 响 应 式 断 点 为 576 像素 ， 即 区 分 超 小 型 和 小 型 网 格 的 宽度 。 在 该 断 点 以 下 ， 
卡片 将 堆 铸 显示 。 当 网 格 介 于 576 像素 到 768 像素 时 ， 每 一 行 里 会 包含 三 张 卡 片 。 由 于 此 时 卡片 
会 非常 小 ， 因 此 需要 用 以 下 SCSS 代码 缩小 卡片 中 的 按钮 尺寸 : 


.product-item ( 
.btn-sm { 
Ginclude media-breakpoint-only (sm) ( 
font-size: $font-size-sm * 0.8; 
} 
} 
} 


使 用 上 述 代 码 ， 即 可 在 小 视 口 环境 下 缩小 卡片 里 的 按钮 。 接 下 来 , 我们 增加 大 型 窗口 中 卡片 
的 间距 。 


在 scss/includes/ product-grid.scss 文件 中 添加 以 下 SCSS 代码 ， 增 大 卡片 的 间距 : 


@include media-breakpoint-up(sm) { 
.card-deck { 
padding-bottom: ($spacer-y * 2); 














} 
} 


借助 卡片 分 层 ， 商 品 网 格 效 果 如 下 图 所 示 。 
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Product Title 


This text describes the above 
product a little not too much 
but just enough or maybe a 
little more 


View this product O 


Product Title 


This text describes the above 
product a little not too much 


View this product O 


Product Title 


This text describes the above 
product a little not too much 
but just enough -- or maybe 
we'll go on even longer on this 
one just because it's fun and, 
well, this product just really 
deserves it! 


View this product © 








使 用 Flexbox 布局 模块 的 卡片 组 
正如 第 1 章 所 解释 过 的 ，Bootstrap 中 新 增 了 可 选 的 对 Flexbox 的 支持 。 可 以 将 Sass 变 


senable-flex 设置 为 true， 启 用 这 一 功能 。 





E 


TE 


创建 名 为 html/includes/product-grid-cards-flexbox.html 的 HTML 局 部 文件 ,测试 Flexbox 布局 
方案 。 别 忘 了 在 html/product.html 文件 中 将 相关 的 引入 语句 替换 为 以 下 代码 : 


((» products-grid-cards-flexbox)) 


在 scss/includes/ variables.scss 文件 中 ， 添 加 以 下 SCSS 代码 : 


// 选项 
// 


// 通过 启用 或 禁用 可 选 功能 来 快速 调整 全 局 样式 


features. 


Senable-flex: 


true; 


html/includes/product-grid-cards-flexbox.html 文件 中 的 HTML 代码 与 html/includes/product- 
grid-cards.html 中 的 类 似 。 当 启用 Flexbox 支持 后 ， 就 无 须 使 用 card-deck-wrapper 封装 容器 一 一 


可 以 将 所 有 的 卡片 都 封装 在 一 个 card-deck 3 


























时 装 容器 里 。 响 应 式 断 点 依 | 





日 设 为 576 像素 。 当 视 口 


宽度 大 于 该 断 点 时 ，Flexbox 布局 默认 就 是 响应 式 的 : 页 面 越 宽 ， 每 一 行 中 所 包含 的 卡片 也 就 越 
多 。 在 大 和 超大 的 视 口中 ， 默 认 每 一 行 会 包含 4 张 卡片 。 可 以 通过 设置 CSS 中 的 flex-basis 








E 








.card-deck 


&'eIbB—ÍfITXBS34CRH. flex-basis JRH 
比如 以 下 SCSS 代码 设 定 flex-basis 


.card ( 


flex-basis: 30$; 


} 











= 
E 性 a 
SIT: 








的 作用 是 指定 Flexbox 布局 下 项 的 初始 长 度 ， 
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在 中 型 网 格 环境 下 , 每 行将 包含 两 张 卡 片 。 因 为 卡片 数 为 奇数 , 最 后 一 行 里 只 显示 一 张 卡片 。 
该 卡片 会 占据 100% 的 可 用 空间 ， 显 示 效 果 如 下 图 所 示 。 











Product Title Product Title 
This text describes the This text describes the 
above product a little above product a little 
not too much but just not too much 


enough or maybe a little 


inm View this product O 


View this product O 


300x200 


Product Title 


This text describes the above product a little not too 
much but just enough -- or maybe we'll go on even longer 
on this one just because it's fun and, well, this product 


just really deserves it! 


View this product O 











可 以 通过 对 每 张 卡片 设置 max-width 值 来 解决 这 一 问题 ，Sass 代码 如 下 所 示 : 


@include media-breakpoint-up(sm) ( 
.card-deck .card ( 
max-width: 46$; 


} 





} 
除了 这 种 做 法 ， 也 可 以 用 Bootstrap 中 的 响应 式 工 具 类 ， 添 加 一 个 仅 在 中 型 网 格 环境 下 显示 


«div class-"card hidden-xs-down hidden-lg-up"> 
«!-- empty card --» 
«/div» 


对 于 这 一 空 卡片 ,应当 移 除 其 自 带 的 边框 和 圆 角 效果 。 可 以 使 用 以 下 SCSS 代码 来 实现 这 一 
操作 : 
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Ginclude media-breakpoint-up(sm) ( 
.card-deck .card ( 
&:last-child ( 
border: initial; // 0 
j 
} 
} 


上 述 代码 中 ，: 1ast-chilg 是 一 种 CSS 里 的 伪 类 。 伪 类 可 配合 选择 符 使 用 ， 用 于 指定 特殊 
状态 的 元 素 。:1last-chila 伪 类 会 选中 所 有 作为 最 后 一 个 子 元 素 而 存在 的 元 素 。 可 以 访问 


ENN 


https://developer.mozilla.org/nl/docs/Web/CSS/:last-child, T fff: 4j J«:1ast-chilad 伪 类 的 信息 。 








请 注意 上 述 SCSS 代码 中 :last-chilg 伪 类 前 的 & 引 用 符 , 该 SCSS 代码 会 被 编 
译 成 以 下 CSS 代码 : 


.card-deck .card:last-child ( 
border: initial; 
} 


可 以 回顾 第 3 章 ， 了 解 更 多 有 关 & 引 用 符 的 内 容 。 
修改 后 ， 中 型 网 格 环境 下 最 后 一 张 卡片 的 样子 如 下 。 








Product Title Product Title 

This text describes the This text describes the 
above product a little not too above product a little not too 
much but just enough or much 


maybe a little more 
View this product © 


View this product O 


Product Title 


This text describes the 
above product a little not too 
much but just enough — or 
maybe we'll go on even 
longer on this one just 
because it's fun and, well, 
this product just really 
deserves it! 


View this product © 











当然 ， 也 可 以 用 以 下 SCSS 代码 来 移 除 圆 角 效果 : 
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.card-deck .card ( 
border-radius: initial; 


} 


可 以 访问 https//developer.mozilla.org/en-US/docs/Web/CSS/CSS Flexible Box Layout/ 
€ Using CSS flexible boxes, 7# Æ 2/4 X CSS3 中 Flexbox 布局 模块 的 知识 。 需 
要 注意 的 是 ，IE9 及 之 前 的 旧版 浏览 器 不 支持 Flexbox 布局 。 


接 下 来 ， 开 始 调整 侧 边栏 中 筛选 选项 的 样式 。 


7.4 侧 边 栏 和 筛选 选项 


现在 开始 调整 侧 边 栏 中 筛选 选项 的 样式 。 侧 边栏 和 筛选 选项 就 在 商品 项 标记 的 前 面 。 目 前 在 
小 、 中 、 大 视 口 中 ， 侧 边栏 都 位 于 左 侧 。 


目前 侧 边 栏 的 样子 如 下 所 示 。 











Narrow your 
selection 
Clearance Sale 


View clearance items 


Categories 


e Option 1 
e Option 2 
* Option 3 
e Option 4 
* Option 5 
e Option 6 
e Option 7 
e Option 8 
e Option 9 
* Option 10 











为 了 最 终 的 设计 ， 我 们 希望 把 Clearance Sale 链接 做 成 引 人 注 目的 超大 按钮 ， 把 筛选 选项 排 
成 两 栏 ， 而 且 每 个 选项 前 是 复 选 框 而 非 项 目 符号 ， 如 下 图 所 示 。 




















Narrow your selection 
7 
Clearance Sale 
View clearance items. 
Categories 
D Option 1 Ooption2 
O Option 3 口 Option 4 
口 Option 5 口 Option 6 
O Option 7 O Option 8 
D Option o Ooption 10 
Brands 
口 Option 1 口 Option 2 
口 Option 3 口 Option 4 
口 Option 5 口 Option 6 
D Option 7 Ooption8 
口 Option9 口 Option 10 








下 面 先 从 基本 的 样式 开始 ， 弄 好 布局 。 
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7.4.1 基本 样式 
我 们 先 来 调整 字体 、 颜 色 、 外 边 距 和 内 边 距 。 
在 _grid-options.scss 这 一 Sass 局 部 文件 中 添加 如 下 规则 : 


.grid-options { 
Gextend .card; 
padding-top: 12px; 
padding-bottom: 24px; 
> h2 { 

margin-top: 0; 
font-size: 1.3 * ($font-size-19g); 
line-height: 1.2; 
color: $gray-dark; 
j 
} 


上 面 的 代码 用 途 如 下 : 


口 给 侧 边 栏 应 用 Bootstrap 的 卡片 样式 (参见 相关 Bootstrap 文档 : http://v4-alpha.getbootstrap. 
com/components/card/ ); 


口 为 侧 边 栏 添 加 上 、 下 内 边 距 ， 让 新 背景 贯穿 侧 边 栏 内 容 区 ; 
O 调整 n2 标题 的 字号 、 行 高 和 颜色 。 








注意 别 忘 了 在 app.scss 文件 中 引入 _grid-options.scss 文件 。 


下 一 步 来 做 Clearance Sale 按钮 。 


7.4.2 ”调整 Clearance Sale 链接 样式 
我 们 要 把 Clearance Sale 链接 变 成 一 个 引 人 注 目的 超大 的 按钮 。 
按照 下 面 的 说 明 调整 标记 : 


口 把 链接 的 标题 和 段落 都 转换 成 按钮 ; 
口 添加 自 定 义 的 按钮 类 ptn-feature， 这 是 我 们 在 第 6 章 创建 的 ， 赋 予 其 特殊 的 颜色 一 一 























红色 ; 
DO 为 sale 标签 添加 Font Awesome 图 标 ， 使 用 Font Awesome 内 置 的 icon-3x 类 ， 将 图 标 放 
大 三 倍 。 


要 了 解 Font Awesome 特 殊 尺 寸 类 的 更 多 信息 ,请 参考 相关 文档 :http://fontawesome.io/ 
examples/#larger。 


调整 后 的 HTML 标记 如 下 所 示 : 
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«a class-"btn btn-feature choose-clearance" href="#"> 
«span class-"icon fa fa-tag fa-3x"»«/sgpan» 
«h3»Clearance Sale</h3> 
«p»View clearance items«c/p» 

</a> 


效果 立竿见影 ， 我 们 向 目标 迈进 了 一 大 步 ， 如 下 图 所 示 。 





d 


Clearance Sale 


View clearance items 














下 面 再 细 化 ， 执 行 以 下 步 又。 


(1) Y Clearance Sale 的 display 属性 设置 为 block, 令 其 显示 为 块 级 元 素 , 通过 继承 Bootstrap 
中 的 m-x-auto 类 , 使 其 居中 。 作 为 工具 类 , m-x-auto 会 通过 把 固定 宽度 的 块 级 元 素 在 水 平方 
向 上 的 外 边 距 设 为 auto 来 实现 居中 效果 。 

Q) 强制 其 宽度 为 其 包含 栏 的 92.5%。 

(3) 添加 上 、 下 内 边 距 。 

(4) 覆盖 Bootstrap 按钮 的 white-space: nowrap 规则 ， 让 文本 可 以 折 行 (Bootstrap 的 
white-space 规则 是 在 /bootstrap/scss/_buttons.scss 中 定义 的 ， 关 于 这 个 属性 的 更 多 信息 ， 大 家 
可 以 参考 http://css-tricks.com/almanac/properties/w/whitespace/ )。 

(5) 将 按钮 设置 为 相对 定位 ， 以 便 对 标签 应 用 绝对 定位 。 

(6) 调整 标题 和 上 段落 的 字体 、 颜 色 、 字 号 和 外 边 距 。 

(7) 把 标签 图 标定 位 到 右上 角 。 


通过 增加 以 下 样式 规则 就 可 以 实现 以 上 目标 : 


.Choose-clearance { 
Gextend .m-x-auto; 
display: block; 
width: 92.5$; 
padding-top: $spacer-y * 2; 
padding-bottom: $spacer-y; 
font-size: 90$; 
white-space: normal; 
position: relative; 
h3 ( 
font-weight: normal; 
color: dfff; 
padding-top: $spacer-y / 2; 
margin: $spacer / 3; 
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p { 
margin: $spacer / 3 $spacer * 2; 
line-height: 1.2; 

j 

.icon ( 
position: absolute; 
top: 0; 
right: 2px; 

j 

} 





请 注意 ，Clearance Sale 按钮 的 背景 色 是 由 html/pages/products.html 文件 中 的 类 设置 的 。 其 
H, btn-feature 类 由 scss/includes/_buttons.scss 片段 中 的 SCSS 代码 生成 : 





.btn-feature { 
@include button-variant($btn-feature-color, $btn-feature-bg, $btn-feature-border); 


} 


结果 不 错 ， 如 下 面 屏幕 截图 所 示 。 








bd 


Clearance 
Sale 


View clearance items 














不 止 如 此 , 这 些 样 式 在 不 同 视 口 中 的 表现 也 很 出 色 。 可 以 花 点 时 间 多 试 坛 。 当 然 ， 有 什么 不 
满意 的 地 方 ， 请 大 家 以 此 为 起 点 自行 改进 。 


接 下 来 轮 到 商品 筛选 选项 了 。 





7.4.3 调整 选项 列表 样式 

本 节 ， 我 们 要 把 几 个 列表 转换 成 商品 筛选 选项 。 

如 果 花 点 时 间 分 析 一 下 在 线 商 店 Amazon ( http://www.amazon.com ) 或 Zappos ( http://www. 
zappos.com ) 的 商品 筛选 选项 的 标记 ， 会 发 现 它 们 其 实 是 链接 列表 ， 而 且 每 个 选项 都 被 做 成 了 复 
选 框 的 样子 。 我 们 也 要 把 链接 做 成 复 选 框 的 样式 ,选择 后 显示 为 勾 选 , 男 外 我 们 还 要 调整 它们 使 
之 跨 设备 完美 运行 ， 包 括 平板 电脑 和 智能 手机 。 
































在 Amazon 和 Zappos 等 电子 商务 网 站 上 ， 筛 选项 与 内 容 管 理 系统 是 关联 的 ， 网 
格 中 的 商品 会 随 着 选项 被 名 选 而 动态 变化 。Bootstrap 是 一 个 前 端 设计 框架 ， 不 
是 内 容 管理 系统 。 因此, 我 们 这 个 练习 做 不 到 动态 筛选 商品 。 但 我 们 这 个 页 面 完 
成 后 ， 完 全 可 以 在 内 容 管理 系统 中 使 用 。 


在 下 节 中 ,我 们 将 使 用 html/pages/products.html 文件 中 的 HTML 代码 ,选项 列表 相关 的 HTML 
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代码 如 下 所 示 : 
«h3»Brands«/h3» 

«ul class-"options-list options-brands"'» 
<li><a href="#">OPLion 1«/a»«/li» 
<li><a href="#">OPLion 2«/a»«/li» 
<li><a href="#">OPLion 3«/a»«/li» 
<li><a href="#">OPLion 4«/a»«/li» 
<li><a href="#">OPLion 5«/a»«/li» 
<li><a href="#">OPLion 6«/a»«/li» 
<li><a href="#">OPLion 7«/a»«/li» 
<li><a hrefz"4"»sOption 8«/a»«/li» 
<li><a href="#">OPLion 9«/a»«/li» 
<li><a href="#">OPLion 10«/a»«/li» 

«/ul» 





编辑 scss/includes/ grid-options.scss 局 部 文件 中 的 SCSS 代码 。 从 列表 相关 的 n3 标题 元 素 开 


始 ， 调 整 其 大 小 、 行 高 、 外 边 距 以 及 颜色 : 


.grid-options ( 
» h3 ( 
font-size: $font-size-1g; 
line-height: 1.2; 
margin-top: $spacer-y / 2; 
color: $gray-dark; 


这 里 要 使 用 >h3 子 选 择 符 ， 因 为 我 们 不 希望 它 应 用 到 h3 标签 ， 


到 Clearance Sale 按钮 中 的 n3 标签 。 

















特别 是 不 能 应 用 


Af, 再 把 注意 力 集中 到 无 序列 表 上 。 它们 都 有 一 个 特殊 的 类 opcions-1ist, 我 们 就 用 它 作 





为 选择 符 ， 确 保 只 针对 这 些 特殊 的 列表 。 
首先 去 掉 项 目 符号 和 内 边 距 : 


.options-list { 
list-style-type: none; 
padding-left: 0; 

} 


接 下 来 调整 链接 样式 。 稍 后 我 们 还 要 为 列表 项 添加 样式 , 因此 我 们 把 这 些 样式 包含 在 了 骨 套 


的 选择 符 中 。 


.options-list ( 
list-style-type: none; 
padding-left: 0; 

li ( 
a ( 
Gextend .btn; 
Gextend .btn-sm; 


n 
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padding-left: 0; 
padding-right: 0; 
color: $gray; 
einclude hover-focus-active ( 
color: $link-color; 
j 
j 
j 
} 


以 上 规则 的 作用 如 下 。 


口 我 们 利用 Sass 的 继承 功能 ,通过 .btn 类 加 入 了 基本 的 按钮 样式 ,包括 显示 inline-block 
链接 和 额外 的 内 边 距 。 

口 因为 没有 添加 其 他 按钮 类 ， 所 以 没有 出 现 背景 颜色 。 

口 通过 添加 基本 的 按钮 样式 ， 可 以 让 用 户 更 方便 点 击 ， 使 用 手指 或 鼠标 缘 宜 。 

口 我 们 再 通过 .btn-sm 类 继承 相关 样式 , 以 减少 内 边 距 , 并 让 字号 比 标准 按钮 再 小 一 些 ( 要 
了 解 Bootstrap 的 按钮 类 ， 请 参见 : http://v4-alpha.getbootstrap.com/components/buttons/ )。 
口 接着 删除 无 序列 表 不 必要 的 左 、 右 内 边 距 。 

口 再 把 链接 文本 的 颜色 改 为 Sgray。 

口 最 后 ， 设 置 悬 停 、 焦 点 和 选中 链接 的 颜色 值 为 $SLink-color。 


现在 应 该 保存 、 编 译 并 刷新 浏览 器 ， 看 看 结果 。 结 果 应 该 如 下 图 所 示 。 






































Categories 
Option 1 
Option 2 
Option 3 








Option 4 


每 个 选项 链接 都 有 了 内 边 距 ， 字 号 和 颜色 也 都 合适 了 。 





你 可 能 奇怪 为 什么 我 要 在 这 里 继承 按钮 的 .btn 和 .btn-sm 类 ,而 不 是 直接 把 这 
两 个 类 添加 到 标记 。 当 然 也 可 以 那么 做 , 但 考虑 到 链接 的 数量 较 多 , 我 想 还 是 通 

人 过 CSS 来 应 用 样式 更 便捷 。 本 章 后 面 几 节 ， 我 们 将 继续 沿用 这 种 思路 ， 对 Font 
Awesome 图 标 样式 也 采用 Sass 而 非 直接 在 标记 中 添加 类 来 应 用 。 


好 了 ， 下 一 步 是 为 选项 链接 添加 复 选 框 。 

















7.4.4 为 选项 链接 添加 Font Awesome 图 标 复 选 框 





本 节 ， 我 们 将 使 用 Font Awesome 图 标 在 选项 链接 左 侧 添 加 空 复 选 框 。 但 我 们 不 在 标记 中 添 
加 ， 而 是 在 Sass 中 添加 ， 因 为 更 快捷 。 然 后 我 们 更 进一步 ， 加 入 另 一 个 Font Awesome 图 标 ， 以 
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表示 悬 停 、 焦 点 和 选中 状态 下 勾 选 的 复 选 框 。 


通过 Sass 添加 图 标 需 要 从 Font Awesome 中 继承 样式 。 首 先 ， 从 bower_components/font- 
awesome 文件 夹 的 _core.scss 文件 中 获得 基本 的 样式 。 在 这 个 文件 中 ， 可 以 看 到 以 下 重要 的 样式 : 


.#{$fa-css-prefix} ( 
display: inline-block; 
font: normal normal normal tsí($fa-font-size-basej)/ft($fa-line-height-base) 
FontAwesome; // 缩短 字体 声明 
font-size: inherit; // 无 法 继承 前 行 字号 ， 所 以 需要 履 盖 
text-rendering: auto; // 优化 可 读 性 抛 掉 #1094 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 





上 述 代 码 中 我 们 使 用 了 基于 Sass 变量 插值 (interpolation ) $65 .4($£a-css-prefix) 
选择 符 。Sass 编译 器 会 根据 #{]} 插 值 语法 将 变量 值 编译 到 选择 符 和 属性 中 。 可 以 

3 访问 http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_, 
阅读 更 多 有 关 Sass 交 量 插值 方面 的 信息 。 


以 上 样式 是 所 有 Font Awesome 图 标的 基础 规则 ,包括 作为 字体 的 Font Awesome 图 标 ， 以 此 
为 基础 可 以 进一步 增强 相应 的 样式 。 

对 现在 的 需求 来 说 , 我们 不 需要 选择 符 和 花 括 号 ， 只 需要 其 中 的 规则 。 我 们 要 
用 到 选项 链接 。 最 重要 的 ， 我 们 要 使 用 :before 伪 元 素 ， 因 为 可 以 确保 效果 最 佳 。 





























[È 


要 了 解 更 多 CSS 2.1 :before 伪 元 素 的 信息 ， 请 参考 这 篇 文章 : http:/coding. 
&A smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo- 


elements-in-css/ 
TE. grid-options.scss XIF PRL FA, ESTESA: 


.options-list ( 
li ( 
a ( 
&:before ( 
Gextend .d4(S$fa-css-prefix); 
} 
} 
} 
} 


这 些 规 则 为 我 们 下 一 步 打 下 了 基础 。 接 下 来 就 可 以 指定 使 用 哪个 Font Awesome 图 标 了 。 浏 
览 这 个 页 面 : http://fontawesome.io/icons/， 会 发 现 空 复 选 框 的 图 标 。 

















x 














C) fa-square-o 
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这 个 图 标的 Sass 规则 可 以 在 font-awesome 文件 夹 的 icons.scss 文件 里 找到 。 打 开 该 文件 , 搜 
索 字 符 串 )-square-o (包括 右 花 括 号 可 以 减少 匹配 项 ， 从 而 缩小 范围 )， 可 以 看 到 下 面 这 一 行 : 


.t($fa-css-prefix)-square-o:before ( content: $fa-var-square-o; ) 





对 于 前 面 这 一 行 ， 我 们 只 需要 content: sfa-var-square-o。 把 它 复制 粘贴 到 
_grid-options.scss 文件 中 的 a:before 选择 符 规 则 的 后 面 ,或 者 干脆 扩展 .fa-square-o:before 
选择 符 : 


.options-list { 
li ( 
a { 
&:before { 
Gextend .#{$fa-css-prefix}; 
Gextend .#{$fa-css-prefix}-square-o:before; 
j 
} 
} 
} 





最 后 ， 我 们 想 获 得 另 一 些 Font Awesome 样式 ， 为 图 标 设 置 固定 的 宽度 ， 避 免 图 标 在 切换 时 
出 现 位 移 。 这 些 样式 可 以 在 font-awesome 文件 夹 的 _fixed-width.scss 文件 中 找到 。 用 以 下 方式 扩 
展 .fa-fw 类 : 








.options-list ( 
li ( 
a { 
&:before { 
Gextend .#{$fa-css-prefix}; 
Gextend .#{$fa-css-prefix}-square-o:before; 
Gextend .#{$fa-css-prefix}-fw; 
j 
j 
j 
} 





添加 上 面 的 样式 后 ,运行 bootstrap watch 命令 并 在 浏览 器 中 观察 结果 。 应 该 看 到 下 图 所 
示 的 复 选 框 








Categories 
O Option 1 
O Option 2 


C) Option 3 








C) Option 4 








接 下 来 ,我们 以 同样 的 方式 添加 选择 符 和 规则 ， 把 Font Awesome 复 选 框图 标的 勾 选 版 应 用 
到 链接 的 悬 停 、 焦 点 和 选中 状态 : 
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.options-list ( 
T d 
a ( 
&:before ( 
Gextend .d4($fa-css-prefix); 
Gextend .4($fa-css-prefix)-square-o:before; 
Gextend .d4($fa-css-prefix)-fw; 
} 
Ginclude hover-focus-active { 
color: S$link-color; 
&:before { 
content: S$fa-var-check-square-o; 


可 以 在 bower components/bootstrap/scss/mixins/ hover.sces 局 部 文件 中 找到 Bootstrap 的 
hover-focus-active 混 人 。 可 以 用 该 混入 来 设置 元 素 的 活动 、 悬 停 和 焦点 状态 。 

保存 文件 ， 然 后 刷新 浏览 器 并 观察 结果 。 当 鼠标 悬 停 在 某 个 链接 上 时 ， 就 会 看 到 被 匀 选 的 复 
选 框 ， 如 下 图 所 示 。 














Categories 
O Option 1 


& Onion 2 


O Option 3 











请 大 家 注意 , 目前 我 们 还 没有 办 法 强制 茶 个 链接 停留 在 选中 状态 , 因为 我 们 没有 
3 内 容 管理 系统 支撑 。 但 我 们 的 样式 已 经 齐备 ,如果 有 了 内 容 管理 系统 ,就 可 以 直 
接 用 了 。 


就 这 样 了 ! 我 们 成 功 地 为 链接 添加 了 复 选 框 ， 能 对 用 户 的 操作 给 出 反馈 了 。 
接 下 来 ,考虑 一 下 充分 利空 间 ， 让 选项 浮动 起 来 。 








7.4.5 使 用 Sass 混入 在 栏 中 对 齐 选项 

上 一 节 ， 我 们 使 用 Sass 实现 了 以 往 需要 通过 添加 标记 实现 的 功能 。 考 虑 到 选项 链接 的 数量 
很 多 ， 这 样 做 效率 最 高 。 同 样 的 思路 也 适用 于 对 齐 列 中 的 选项 。 

当然 ， 如 果 使 用 Bootstrap 的 row 和 栏 类 ， 通 过 调整 标记 也 是 可 以 的 : 

«ul class-"options-list options-categories row"» 


«li class-"col-xs-6"»«a href="#">Option 1«/a»«/li» 
«li class-"col-xs-6"»«a href-"i$"»2O0ption 2«/a»«/li» 
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第 6 章 的 介绍 中 提 到 过 ，Panini 模板 里 支持 循环 迁 代 语句 。 在 模板 里 使 用 循环 语 
多 可 以 让 代码 更 符合 DRY 原则 ， 避 免 出 现 重 复 代 码 。html/pages/products.html 
文件 里 就 有 一 个 不 错 的 例子 。 相 关 代 码 如 下 : 


{{#each numbers-10}} 
<li><a href="#">Option {{this}}</a></li> 
{{/each}} 


模板 会 从 文件 里 读 取 YAML 格式 的 变量 numbers-10， 其 内 含 数字 1 到 10。 事 实 上 ， 使 用 
迭代 的 序号 会 更 合理 ， 但 遗憾 的 是 Panini 并 不 支持 Handlebars 的 这 一 特性 。 详 情 可 参考 
https://github.com/zurb/panini/issues/67 。 


ZGA Bootstrap 的 混和 人 ， 我 们 用 几 行 Sass 代码 可 以 就 实现 同样 的 效果 。 


(1) 首先 给 .options-list 选择 符 应 用 make-row() 混 入 : 


.options-list ( 
Ginclude make-row(); 


} 


(2) 这 个 混入 加 入 的 样式 与 我 们 在 标记 中 添加 row 类 加 入 的 样式 一 样 , 但 这 里 只 需要 一 行 代码 。 
(3) 然后 使 用 make-col (6) 混 入 给 列表 项 应 用 分 栏 规 则 ， 将 内 容 分 为 6 栏 : 
.grid-options { 
@include make-row(); 
li ( 
Ginclude make-col-ready(); 
Ginclude make-col(6); 
j 
j 
(4) 这 样 就 跟 我 们 为 相关 的 1i 标签 添加 col-xs-6 类 一 样 。 之 后 我 们 将 介绍 如 何 
转换 为 响应 式 。 


添加 前 面 的 内 容 之 后 ,保存 文件 ， 编 译 为 CSS， 再 刷新 浏览 器 ,应 该 可 以 看 到 选项 链接 分 成 
两 栏 了 。 












































这 些 栏 


[È 











Categories 

O Option 1 O Option 2 
O Option 3 O Option 4 
O Option 5 O Option 6 
O Option 7 C) Option 8 
O Option 9 C) Option 10 











不 错 吧 ! 
接 下 来 针对 小 视 口 进行 一 番 调 整 。 
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7.4.6 ”针对 平板 和 手机 调整 选项 列表 布局 
我 们 要 限制 选项 面板 的 宽度 ， 让 它 在 平板 设备 中 不 至 于 太 宽 。 


在 针对 平板 的 中 型 网 格 环境 中 , 也 就 是 宽度 介 于 768 像素 到 992 像素 之 间 的 窗口 中 , 无 论 是 
Clearance Sale 按钮 还 是 选项 列表 ， 显 示 效 果 都 不 太 好 。 





























Narrow your 
selection 


Product Title 

This text describes the above product 
a little not too much but just enough or 
maybe a little more 


clearance 
items 





. View this product O 
Categories 


DOption1 O Option 2 
DO Option 3 O Option 4 
D Option5 O Option 6 
DOption7 O Option 8 


DO Option 9 O Option 10 











可 以 按 以 下 方式 使 用 Sass， 在 中 型 网 格 中 强制 让 所 有 的 选项 显示 在 单 栏 里 : 


.grid-options { 
Ginclude make-row(); 
Ta. f 
Ginclude make-col-ready(); 
Ginclude make-col(6); 
Ginclude media-breakpoint-only (md) ( 
Ginclude make-col(12); 
} 
} 
} 


不 过 ， 上 述 代 码 并 未 解决 中 型 网 格 中 Clearance Sale 按钮 所 遇 到 的 问题 。 可 以 尝试 缩小 其 字 
号 ， 修 复 问 题 。 

又 或 者 ， 可 以 通过 调整 主 界面 的 网 格 来 解决 该 问题 。 在 html/pages/products.html 文件 中 按 以 
下 方式 修改 网 格 类 : 


«div class-"grid-options col-md-4 col-1g-3"» 





</div> 
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«div class-"products-grid col-md-8 colL-1g-9"> 


</div> 








修改 后 ,中 型 网 格 中 网 格 选项 就 会 占据 四 栏 。 解 决 中 型 网 格 中 的 问题 后 ,我 们 来 看 小 型 网 格 
中 的 情况 。 








目前 来 看 ，Clearance Sale 按钮 有 点 太 宽 。 在 480 像素 到 768 像素 下 ， 选 项 列表 相隔 太 远 。 相 
应 的 截图 如 下 所 示 。 





Narrow your selection 


bd 


Clearance Sale 


View clearance items 








Categories 

O Option 1 O Option 2 

O Option 3 O Option 4 

O Option 5 O Option 6 

O Option 7 O Option 8 
Option 9 J Option 10 








其 实 只 要 给 选项 面板 设置 一 个 最 大 宽度 属性 ( 480 像素 ) 就 行 了 : 


.grid-options ( 
max-width: 480px; 
j 

















下 面 我 们 再 调整 选项 列表 ,让 它们 在 小 视 口中 显示 为 三 栏 。 使 用 Sass,， 可 以 在 适当 的 选择 符 
中 嵌 套 一 个 媒体 查询 ， 然 后 在 其 中 添加 一 个 用 于 调整 的 make-col (4) 混 人 ， 如 以 下 代码 片段 
Biz: 


.grid-options ( 
Ginclude make-row(); 
li ( 
Ginclude make-col(); 
Ginclude make-col(6); 
Ginclude media-breakpoint-down(sm) ( 
Ginclude make-col(4); 
j 
j 
} 














这 样 调整 之 后 ,保存 文件 ， 然 后 在 窜 视 口中 测试 一 下 ， 应 该 看 到 类 似 下 图 所 示 的 结 
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Narrow your selection 


Clearance Sale 


View clearance items 





Categories 

O Option 1 O Option 2 D Option 3 
O Option 4 O Option 5 O Option 6 
O Option 7 O Option 8 O Option 9 
O Option 10 











现在 我 们 再 解决 下 一 个 问题 : 在 单 栏 布 局 中 隐藏 得 选项， 只 在 需要 时 显示 。 


7.4.7. EFIE STR TE X 


现在 ， 筛 选项 占据 了 相当 多 的 垂直 空间 。 这 在 小 视 口中 是 个 问题 ,会 把 商品 网 格 推 到 页 面 下 
方 很 远 的 地 方 。 


原因 就 是 筛选 项 不 必要 地 占据 了 大 量 垂 直 空 间 。 商 品 本 身 才 是 最 应 该 优先 显示 的 。 我们 既 要 
让 手机 用 户 迅 速 看 到 商品 ， 也 可 以 在 需要 时 打开 筛选 项 。 


为 此 ， 我 们 使 用 Bootstrap 的 折 闭 插件 。 下 面 几 步 我 们 将 对 选项 面板 使 用 折 羞 插件， 同时 添 
加 一 个 扩展 面板 的 按钮 ， 并 把 折 肢 行为 限定 在 罕 视 口中 。 


(1) 在 编辑 器 中 打开 products.html。 

(2) 添加 一 个 新 的 div 标签 ， 封 装 Clearance Sale 按钮 和 三 个 选项 列表 。 为 这 个 div 添加 一 
个 特殊 的 类 collapse， 以 及 一 个 唯一 的 ID, LAB JavaScript 插件 找到 它 ， 另 外 也 添加 一 个 同名 
的 类 : 


<h2>Narrow your selection«c/h2» 
«div id-"options-panel" class-"options-panel collapse"» 

































































</div> 





(3) 请 注意 ， 上 一 步 的 代码 中 collapse 类 会 在 所 有 尺寸 的 视 口 中 隐藏 内 容 。 可 以 添加 
navbar-toggleable-sm 类 ,确保 在 较 大 的 视 口 中 可 以 显示 内 容 : 


<h2>Narrow your selection</h2> 
<div id="options-panel" class="options-panel collapse navbar-toggleable-sm"> 





</div> 
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Bootstrap 4944 Æ JavaScript 插件 也 是 我 们 在 响应 式 折 营 导 航 条 中 使 用 的 。 这 个 
&5 插件 也 可 以 用 于 其 他 方面 ， 具 体 可 以 参考 Bootstrap 的 文档 : http://v4-alpha. 
getbootstrap.com/components/collapse/ ; 
(4) 保存 文件 ， 刷 新 浏览 器 ， 你 会 发 现 Clearance Sale 按钮 和 选项 列表 顿时 隐藏 了 。 只 剩 下 选 
项 面板 上 方 的 h2 标题 “Narrow your selection” 了 ， 如 下 图 所 示 。 





Narrow your selection 








(5) 现在 需要 一 个 切换 按钮 ， 在 被 点 击 时 显示 筛选 项 。 
(6) 在 这 个 还 能 看 见 的 内 容 为 “Narrow your selection" If] n2 标题 中 , 添加 一 个 button 元 素 ， 
及 相应 的 属性 : 
<h2 class="clearfix">Narrow your selection 
<button type="button" 

class="options-panel-toggle btn btn-primary pull-right hidden-md-up" 

data-toggle-"collapse" data-target="#options-panel"> 

<span class="icon fa fa-cog fa-2x"></span> 


</button> 
«/h2» 


(7) 下 面 来 解释 一 下 上 面 的 标记 : 


O 为 n2 标题 添加 的 clearfix 类 可 以 确保 它 包 含 切换 按钮 ， 因 为 切换 按钮 是 用 pull-right 
类 浮动 到 右边 的 ; 

口 类 btn 和 btn-primary 会 为 新 的 按钮 添加 Bootstrap 的 基本 按钮 样式 ， 背 景 颜 色 为 
S$brand-primary; 

O 2S niàden-md-up 会 在 更 大 视 口中 隐藏 按钮 ; 

口 在 button 元 素 中 ， 我 们 放 了 一 个 Font Awesome 齿轮 图 标 , 使 用 fa-2x 类 放大 到 两 倍 ; 
a 保存 并 刷新 浏览 器 ， 可 以 看 到 下 面 的 结果 。 























Narrow your selection E3 











(8) 在 罕 视 口中 ， 选 项 列表 会 折 受 起 来 ， 但 切换 按钮 可 见 。 
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—  Dootstrappin &r 


Home / Parent Category 


Produet oso n 
Name w jJlanatory text 


Narrow your selection EJ 
Product Title Longer Product Title 
This text describes the above This text describes the above 
product a little not too much product a little not too much 
but just enough or maybe a 

little more View this product O 


View this product O 











在 小 、 中 、 大 视 口中 ， 切 换 按 钮 隐藏 ， 选 项 列表 可 见 。 





Product Category Name 


Narrow your selection 


中 


Clearance Sale 


View cinararce tema 


Categories Product Title umu Product Titie Even Longer Product Titie 


desacsibus tha above product a ittie 








Wow this product © 
View his product © 














Exceptional Product Title Even Longer Product Title Product Title 





7.5 添加 搜索 表单 


在 之 前 的 内 容 中 , 我 们 搭建 了 导航 结构 。 对 于 我 们 的 网 站 来 说 ,大 概 一 半 访 客 会 使 用 这 一 导 
航 组 件 ， 而 另 一 半 则 会 选择 用 搜索 工具 来 寻找 内 容 。 因 此 , 在 页 面 上 应 当 始 终 显示 对 内 容 和 商品 
的 搜索 功能 。 
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如 下 图 所 示 ， 可 以 在 页 局 上 添加 搜索 表单 。 





TM | | 


在 html/includes/header.html 文件 中 编辑 以 下 HTML 代码 : 


«div class="utility-nav"> 
«ul» 


























«li»«a href="#" »«i class-"icon fa fa-user 
fa-lg"»«/i»«span» Log In or Register«/span»«/a»«/li» 
«li»«a href="#" »«i class-"icon fa fa-shopping-cart 
fa-lg"»«/i»«span» View Cart«/span»«/a»«/li» 
«/ul» 
</div> 
«form class-"search-form form-inline pull-md-right"> 
«input class-"form-control" type="text" placeholder="Search"> 
<button class="btn btn-outline-success hidden-sm-down" type="submit">Search 
</button> 
</form> 
</div> 


上 述 标记 代码 的 作用 为 : 


口 Bootstrap 中 的 £orm-inline 和 form-control 类 被 用 于 内 联 表单 。 可 以 访问 http:/v4- 
alpha.getbootstrap.com/components/forms/#inline-forms ， 阅 读 更 多 有 关 该 种 表单 的 信息 。 

D pull-md-right 类 可 以 让 表单 浮动 于 页 眉 的 右 侧 。 

口 hidden-sm-down 类 可 以 在 小 视 口 中 隐藏 搜索 按钮 ， 仅 显示 搜索 框 。 


上 述 代码 生效 后 ， 图 标 会 被 覆盖 。 可 以 在 scss/includes/ header.sess 局 部 文件 中 用 以 下 SCSS 
代码 设置 上 方 的 内 边 距 ， 解 决 这 一 问题 : 
header[role-"banner"] ( 
.Search-form ( 
Ginclude media-breakpoint-up(md) ( 
padding-top: $spacer-y * 6; 
j 


j 
} 


其 中 ，media-pbreakpoint-up (md) 混 入 使 得 内 边 距 仅 在 中 和 更 大 的 视 口 环境 中 生效 。 
使 用 Typeahead 插件 


在 搜索 表单 中 增加 自动 完成 功能 可 以 有 效 地 提升 搜索 的 可 用 性 ， 而 这 一 功能 可 以 使 用 
Bootstrap 2 里 的 typeahead 插件 来 实现 。 有 关 该 插件 的 更 多 信息 ， 可 参考 https:/github.conybassjobsen/ 
Bootstrap-3-Typeahead。 该 插件 在 Bootstrap 4 中 也 可 以 使 用 。 


以 下 是 将 Typeahead 插件 集成 到 自己 项 目 里 的 具体 步骤 。 
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a 首先 ， 将 该 插件 添加 到 bowerjson 文件 所 声明 的 项 目 依 赖 中 ， 如 下 所 示 : 


"dependencies": ( 

"bootstrap": "4", 

"tether": "^17,.T.2"; 

"font-awesome": "^4.6.1", 

"bootstrap3-typeahead": "git://github.com/bassjobsen/Bootstrap-3-Typeahead.gitimaster" 
} 


口 然后 运行 bootstrap watch 或 power update 命令 。 


a 在 Gulpfilejs 文 件 中 j 编辑 compile-3js 任务 ， 确 保 该 插件 被 打包 进项 目 中 : 


gulp.task('compile-js', function() ( 
return gulp.src([ 

bowerpath« 'jquery/dist/jquery.min.js' 
bowerpath« 'tether/dist/js/tether.min.js' 
bowerpath« 'bootstrap/dist/js/bootstrap.min.js' 
bowerpath-« 'holderjs/holder.min.js', // Holder.js for project 
development only 
bowerpath-« 'bootstrap3-typeahead/bootstrap3-typeahead.min.js' 
'js/main.js']) 

.pipe(concat('app.js')) 

.pipe(gulp.dest('./ site/js/')); 








)); 


口 接着 ， 初 始 化 该 插件 ， 将 其 应 用 到 搜索 表单 上 。 打 开 js/mainjs 文件 ， 在 其 中 编辑 以 下 
JavaScript 代码 : 














$('.search-form .form-control').typeahead( (items: 4, source: ["Alabama","Alaska", 
"Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida", 
"Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas", "Kentucky","Louisiana", 
"Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri", 
"Montana","Nebraska","Nevada", "New Hampshire","New Jersey","New Mexico","New 
York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania", 
"Rhode Island","South Carolina","South Dakota", "Tennessee", "Texas", "Utah", "Vermont", 
"Virginia","Washington","West Virginia","Wisconsin","Wyoming"] }); 


OQ 最 后 ， 调 整 建议 菜单 的 css z-index 值 ， 避 人 免 其 被 导航 条 遮挡 。 可 在 scss/includes/ 
_header.scss 局 部 文件 中 使 用 以 下 SCSS 代码 : 


header[role-"banner"] { 
.Search-form { 
Qinclude media-breakpoint-up(md) ( 
padding-top: $spacer-y * 6; 

















) 
.typeahead.dropdown-menu ( 
z-index: 2000; 


} 


至 此 ， 包含 自动 完成 功 铺 6 的 搜索 表单 就 已 经 完成 了 。 isi f bootstrap watch fij 命令 并 在 Yj 
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器 中 观察 预期 的 结果 。 在 搜索 表单 中 键 和 人 A 








a 


Alabama 


Arkansas 








Searct 


加 Alaska DEPARTMENTS - 
Arizona 








， 页 面 上 即 呈 现 一 个 包含 选项 建议 的 下 拉 荣 


在 Bootstrap 3 版 本 中 ，typeahead 插件 被 废弃 ， 转 而 使 用 typeahead.js (参考 
https://github.com/twitter/typeahead.js )。 在 Bootstrap 4 中 使 用 typeahead.js 的 话 需 
要 引入 一 些 额外 的 CSS 代码 。 可 以 访问 https://github.com/bassjobsen/typeahead 


js-bootstrap4-css/， 下 载 这 些 CSS 及 相应 的 SCSS 代码 


祝贺 你 ， 有 了 搜索 表单 ， 终 于 完工 啦 ! 


7.6 “小结 





本 章 ， 我 们 利用 Bootstrap 的 样式 快速 实现 了 面包 屑 














Ba 应 样式 确保 所 有 商品 的 高 度 一 致 。 


我 们 为 复杂 的 Clearance Sale 按钮 应 用 了 样式 ， 用 到 了 sbrand-feature 这 个 红 


、 页 面 标题 和 分 页 导航 ， 并 根据 需要 进 
行 了 定制 。 然 后 调整 了 Bootstrap 的 网 格 样式 ， 为 商品 项 创建 了 整齐 的 布局 ， 使 用 Bootsrtap 的 移 








Ab Ed 


[ 色 背 景 ， 让 





筛选 项 更 易 点 击 。 同 时 ， 使 用 Bootstrap 的 栏 类 ， 加 上 响应 式 调 整 ， 对 齐 了 筛选 项 列表 ， 而 且 适 


合 多 视 口 宽度 。 
最 后 ， 增 加 了 一 个 拥有 自动 完成 功能 的 搜索 表单 。 
再 次 祝贺 
于 三 





章 ， 我 们 更 进一步 ， 用 Angular 2 重建 项 目 。 





你 ! 现在 我 们 的 企业 网 站 集成 了 一 个 很 像样 的 电子 商务 页 面 。 
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单 页 面 营 销 网 站 











我 们 已 经 掌握 了 很 多 使 用 Bootstrap 的 重要 技能 。 现 在 ， 是 时 候 拿 出 更 多 的 美和 创意 来 帮助 
客户 实现 他 们 全 方位 在 线 营 销 的 愿望 了 。 本 章 将 制作 一 个 漂亮 的 单 页 面 高 端 营 销 网 站 。 


本 章 要 完成 以 下 任务 : 


口 一 个 大 型 介绍 性 传送 带 展示 区 ， 配 有 定制 的 响应 式 欢迎 语 ; 
OQ 一 个 客户 评论 区 ， 显 示 为 带 说 明 的 图 片 墙 版 式 ; 

口 一 个 功能 清单 ， 使 用 大 号 Font Awesome 图 标 ; 

D 一 个 带 有 定制 价目 表 的 注册 区 ; 

a 一 个 可 动态 滚动 的 ScrollSpy 导航 条 。 














8.1 概况 


设想 有 一 位 潜在 客户 联系 我 们 ,她 深 深 地 爱 上 一 种 漂亮 的 网 站 ,就 是 那 种 可 以 垂直 滚动 ， 以 
强烈 的 视觉 冲击 力 展示 商品 或 信息 ， 还 有 一 个 突出 的 行动 召唤 按钮 的 单 页 面 网 站 。 她 想 让 你 做 


一 个 
o 














这 位 客户 知识 渊博 ， 目 光 如 炬 。 她 经 常 光顾 http;/onepagelove.com, Jf Hk 
的 功能 ， 包 括 : 


a 一 个 清新 、 现 代 ， 具 有 美感 的 网 站 ; 

O 一 条 介绍 性 的 欢迎 语 ， 位 于 吸引 人 的 背景 图 片 之 上 ; 

口 一 个 高 效 的 商品 主要 功能 展示 区 ， 用 醒目 的 图 标 来 突出 ; 

a 富有 视觉 冲击 力 的 客户 评论 板 ; I 
a 三 个 能 让 客户 一 目 了 然 的 基本 价目 表 ， 方便 选择 ， 快 捷 注册 ; 

a 转化 ! 一 切 都 在 吸引 用 户 一 步 一 步 向 下 看 ， 让 人 几乎 无 法 拒绝 点 击 最 后 的 注册 按钮 。 


为 了 保持 她 未 来 产品 发 布 的 神秘 感 , 我 们 的 客户 没有 为 我 们 提供 实际 商品 或 服务 的 类 别 。 她 
给 了 我 们 一 个 设计 图 ,希望 我 们 在 设计 图 中 使 用 占 位 图 片 。 





3 Tr 


TEREK 
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第 一 部 分 是 一 张 全 宽 的 引 人 注 目的 高 清 图 片 ,上面 有 大 大 的 欢迎 语 , 以 及 一 个 邀请 向 下 滚动 
阅读 的 按钮 ， 如 下 图 所 示 。 





Bootstrappin' WELCOME FEATURES IMPACT SIGN UP 


BIG 


Welcome 





Message 


Ingenious marketing copy. And some more ingenious 
marketing copy. 
Learn more © 








第 二 部 分 列 出 商品 的 六 个 重要 功能 ， 分 布 在 三 栏 网 格 内 ， 并 配备 相应 的 图 标 ， 如 下 图 所 示 。 














Bootstrappin’ WELCOME FEATURES IMPACT SIGN UP 


Features 


e T 9 








Feature 1 Feature 2 Feature 3 
Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec sed odio dui. Cras justo odio, dapibus ac 
metus. Fusce dapibus, tellus ac cursus metus. Fusce dapibus, tellus ac cursus facilisis in, egestas eget quam. 
commodo. commodo. 
一 tug BEN 
Feature 4 Feature 5 Feature 6 
Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec sed odio dui. Cras justo odio, dapibus ac 
metus. Fusce dapibus, tellus ac cursus metus. Fusce dapibus, tellus ac cursus facilisis in, egestas eget quam. 














第 三 部 分 展示 客户 的 评论 ， 有 图 片 ， 有 文字 ， 以 图 片 增 形式 呈现 。 
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概况 
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Booisiroppin ^ weicove 


Impact 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla pretium 
commodo ultrici 


Smiling Cusi 


Lorem ipsum 
dolor sit amet 


Silir 





FEATURES SIGN UP 


Lorem ipsum dolor sit amet 
elit. 


Lorem ipsum 
dolor sit amet, 
consectetur 
adipiscing elit. 
Proin euismod, 


nulla 


iling 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla pretium 
commodo ultricies 


Smiling Cusi 


Lorem ipsum dolor sit amet 
-.. elit. 


Smiling Custo 




















第 四 部 分 也 是 最 后 一 部 分 , 提供 了 三 个 可 选 方案 , 每 个 方案 对 应 相应 的 价目 表 ， 同时 在 视觉 
上 突出 中 间 的 价目 表 ， 如 下 图 所 示 。 











Bootstroppin wercowe 


FEATURES 


Sign up now! 


PREMIUM PLAN 


$29 


BASIC PLAN PRO PLAN 


$39 


$19 








Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 


Sign up now! 
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真是 一 位 精明 又 有 见识 的 客户 ! 她 最 后 还 要 求 我 们 的 设计 必须 完美 地 适应 平板 电脑 和 智能 
手机 。 


目标 很 远大 。 当 然 没 问题 ， 动 手 吧 。 














82 ”研究 初始 文件 


我 们 开始 来 研究 初始 的 文件 。 如 第 1 章 所 描述 的 ， 用 Bootstrap CLI 创建 一 个 新 项 目 。 








可 以 通过 运行 以 下 命令 ， 安 装 Bootstrap CLI: 
npm install -g bootstrap-cli 
然后 通过 运行 下 述 命令 创建 项 目 : 


bootstrap new 























与 之 前 一 样 , 在 提示 符 中 选择 “An empty new Bootstrap project. Powered by Panini, Sass and Gulp” o 
创建 成 功 后 ， 即 可 看 到 与 第 1 章 类 似 的 模板 。 





| 六 assets 

[— bower components 
| 一 bower.json 
I— etc 

L— Gulpfile.js 
I— html 

I— node modules 
I— package. json 
| 一 README .md 

| 一 scss 

—— site 














之 后 ， 需 要 执行 以 下 几 步 额外 操作 。 
(1) 创建 名 为 assets/images 的 文件 夹 。 





(2) 将 images 文件 夹 中 的 文件 复制 到 刚 创建 的 assets/images 里 ， 其 中 包含 下 面 10 张 图 片 。 


O 一 张 名 为 logo.png 的 logo 图 片 。 
口 两 张 用 于 引导 介绍 的 背景 图 片 。 
口 七 张 用 于 Impact 区 域 的 人 物 头 像 照 片 。 











(3) 这 些 图 片 会 通过 Gulpfilejs 文件 中 的 copy 任务 自动 复制 到 folder 目录 里 : 


// 复制 资源 

gulp.task('copy', function() ( 
gulp.src(['assets/**/*']).pipe(gulp.dest(' site')); 
)); 
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而 包含 Panini 模板 的 html 文件 夹 的 文件 和 文件 结构 则 如 下 图 所 示 。 





includes 
features.html 
footer.html 
footerjavascripts.html 
impact.html 
intro.html 
page-header.html 
photo-credits.html 
signup.html 

layouts 

[一 default.html 

pages 

E index.html 
photo-credits.html 











有 关 Panini 的 更 多 信息 ， 可 参考 https://github.com/zurb/panini。 


除了 用 上 述 方法 调整 ,也 可 以 直接 基于 chapter8/start 文件 夹 中 的 文件 开始 项 目 。 在 该 文件 夹 
中 ， 运 行 npm install Hl bower install 命令 ， 然 后 再 运行 bootstrap watch E gulp fi 
令 后 ， 在 浏览 需 里 观察 结果 。 











83 了 解 页 面 内 容 


运行 bootstrap watch 命令 并 用 浏览 器 打开 http://localhost:8080/ 查 看 网 页 ， 可 以 看 到 下 面 列 
出 的 主要 组 件 。 当 然 ， 目 前 这 些 组 件 使 用 的 都 是 Bootstrap 的 默认 样式 ， 稍 后 我 们 会 添加 定制 样式 。 


口 固定 在 顶部 的 导航 条 。 
口 带 一 句 大 号 欢迎 语 的 高 清 图 。 

Q 功能 介绍 ， 包 括 图 标 、 标 题 、 文 字 ， 分 三 栏 。 

Q Impact Kiki 6 位 满意 的 用 户 的 照片 ， 占 位 文本 代表 他 们 的 赞扬 。 

口 Sign up Nowl! 部 分 是 三 张 价目 表 ， 包 括 Basic Plan, Premium Plan 和 Pro Plan ， 每 个 下 
面 都 有 一 个 Sign up Now! 按 钮 。 

口 一 个 页 脚 的 logo。 

口 图 片 出 处 〈 按 照 许可 给 出 每 张 图 片 的 来 源 )。 


要 查看 标记 ,请 用 编辑 器 打开 相应 的 Panini 局 部 文件 。 在 后 面 的 几 步 中 , 我 们 逐渐 熟悉 这 些 
标记 。 

































































8.4 添加 Font Awesome 图 标 字体 至 项 目 


Font Awesome 可 以 提供 矢量 图 标 , 可 快速 用 CSS 来 定制 大 小 、 颜 色 和 阴影 等 效果 。 第 5 章 
介绍 了 如 何 用 Sass 将 Font Awesome 的 CSS 编译 到 自己 项 目 里 。 
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本 章 示 例 中 ,我 们 则 简单 地 从 CDN 加 载 Font Awesome 代码 ,将 其 链接 到 html/layouts/default. 
html HTML 模板 里 ， 代 码 如 下 : 


«link rel-"stylesheet" 
href-"https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"-» 


8.5 调整 导航 条 


本 章 的 项 目 包含 一 个 固定 在 顶部 的 导航 条 , 链接 在 基 停 和 选中 状态 会 有 显著 的 颜色 变化 。 为 
Jt, 我 通过 设置 相应 的 变量 应 用 了 一 些 样式 。 下 面 我 来 一 一 指出 ,然后 我 们 再 探讨 怎么 给 标记 做 
一 些 必要 的 调整 。 

如 前 所 述 ，scss/_variables.scss 文件 是 以 Bootstrap 的 variables.sess 文件 为 基础 的 。 在 这 个 文 
件 里 ,我 像 前 几 间 一样， 定制 了 灰色 变量 。 可 以 在 文件 一 开头 看 到 这 些 变量 。 

接着 我 又 调整 了 针对 该 设计 的 导航 条 的 以 下 变量 , 涉及 它 的 高 度 、 外 边 距 、 颜 色 、 悬 停 颜色 : 




















[a 








// 导航 条 

$navbar-bg: #fff; 

// 导航 条 链接 

$navbar-link-color: $gray; 
$navbar-link-bg: #fff; 
$navbar-link-hover-color: #EET; 
$navbar-link-hover-bg: $gray; 
$navbar-link-active-color: FEET; 
$navbar-link-active-bg: $gray-dark; 


我 们 将 使 用 第 1 章 描述 过 的 响应 式 导 航 条 。 相 关 的 HTML 代码 保存 在 html/includes/page-header. 
html 文件 里 ， 如 下 所 示 : 


«nav class-"navbar navbar-fixed-top"> 
«div class-"container"» 

«button class-"navbar-toggler hidden-sm-up" type-"button" data-toggle-"collapse" 
data-target-"ftexCollapsingNavbar2" aria-controls-"exCollapsingNavbar2" 
aria-expanded-"false" aria-label-"Toggle navigation"» 

«/button» 

«div class-"collapse navbar-toggleable-xs" id-"exCollapsingNavbar2"» 

«a class-"navbar-brand" href-"index.html"- 
«img src-"((root))images/logo.png" alt-"Bootstrappin'"-» 
</a> 
«ul class="nav navbar-nav"> 
<li class="nav-item active"> 
«a class-"nav-link" href="#">Welcome «span class="sr-only">(current)</span></a> 
</li> 
<li class="nav-item"> 
<a class="nav-link" href="#">Features</a> 
MES 
«li class-"nav-item"- 
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«a class-"nav-link" href="#">Impact</a> 
«/li» 
«li class-"nav-item"-» 
«a class-"nav-link" href="#">Sign up</a> 
«/li» 
«/ul» 
«/div» 
</div> 
</nav> 


从 以 上 代码 可 以 看 到 ， 导 航 条 中 使 用 了 navibar-fixed-top 类 ， 会 将 导航 条 固定 于 页 面 顶 
部 , 除 此 之 外 ,该 类 还 会 将 border-radius 属性 的 值 设 为 0。 除 了 navbar-fixed-top,Bootstrap 
中 还 有 一 系列 别 的 用 于 调整 导航 条 位 置 (静态 或 固定 ) 的 CSS 类 。 


除了 这 些 定制 变量 ,我 还 稍微 修改 了 一 下 _navbar.scss 文件 。 定 制 了 导航 条 展开 时 的 列表 项 ， 
添加 了 内 边 距 并 移 除 链接 间 的 空 阶 ， 同 时 把 文学 转换 成 大 写 : 


.navbar { 
background-color: $navbar-bg; 
color: $navbar-link-color; 
padding: 0 1rem; 
.nav-item + .nav-item ( 
margin-left: 0; 
} 
.nav-link, .navbar-brand { 
padding: $spacer-y * .75 $spacer-x * 2; 
} 
} 
.navbar-brand img { 
width: $brand-image-width; 
} 
.nav-link { 
color: $navbar-link-color; 
line-height: $brand-image-height; 
text-transform: uppercase; 
.active & ( 
background-color: $navbar-link-active-bg; 
color: $navbar-link-active-color; 























} 
Ginclude hover { 
background-color: $navbar-link-hover-bg; 
color: $navbar-link-hover-color; 
} 
} 








Bootstrap 的 预定 义 CSS 类 里 也 包含 了 一 些 用 于 调整 文字 的 类 。 更 多 信息 可 参考 
https://getbootstrap.com/docs/4.3/utilities/text/ ; 


logo 图 片 的 原始 尺寸 为 : 宽 900 像素 ， 高 259 像素 。 当 将 图 片 宽 度 调整 为 120 像素 时 ， 可 用 
这 些 原始 尺寸 数据 来 计算 其 最 终 的 高 度 : 
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sbrand-image-width: 120px; 
Sbrand-image-height: (259 * $brand-image-width / 900); 


导航 条 中 链接 的 行 高 会 被 设 为 Sbrand-image-height 变量 值 ， 使 其 与 品牌 图 片 对 齐 。 














这 样 ， 导 航 条 的 总 高 度 就 变 成 了 sbrand-image-height + 2 * (Sspacer-y * 0.75), 
我 们 将 用 该 值 来 设置 HTML 中 body 元 素 上 方 的 内 边 距 , 不 然 的 话 固定 放置 的 导航 条 会 和 页 面 主 
体内 容 发 生 重生 


Sbrand-image-height 变量 值 的 单位 是 像素 ， 而 $ spacer-y 的 单位 则 是 rem, Sass 中 无 法 
将 这 两 者 直接 相 加 。 可 以 通过 除 以 Irem 的 方式 , 消 掉 rem 单位 。 得 到 的 值 乘 以 sfont-size-root 
就 能 获取 以 像素 为 单位 的 结 


首先 ， 在 scss/includes 文件 夹 中 创建 一 个 名 为 page-contents.scss 的 文件 。 
将 其 引入 到 main.scss 里 ， 如 下 所 示 : 


Gimport " page-contents"; 














scss/app.scss 中 计算 body 元 素 padding-top 值 的 代码 如 下 : 


body { 
padding-top: (2 * ($spacer-y * .75) / 1rem * $font-size-root) + $brand-image-height; 
} 


调整 过 的 变量 和 导航 条 定制 结合 起 来 ， 就 得 到 了 如 下 结 


Bootstrappin' FEATURES IMPACT SIGN UP 


下 面 我 们 就 从 高 清 图 和 大 号 欢迎 语 开始 。 























8.6 iE EB 


高 清 图 是 Bootstrap 中 用 于 特别 显示 网 站 关键 信息 的 组 件 。 有 关 高清 图 及 其 HTML 标记 方面 
的 信息 ， 可 参考 http://v4-alpha.getbootstrap.com/components/jumbotron/。 


本 节 ， 我 们 要 定制 高 清 图 ， 显 示 客 户 的 大 号 欢迎 语 ， 同 时 要 调整 标记 样式 。 包 括 添加 大 青 景 
图 ， 放 大 欢迎 语文 字 ， 然 后 调整 其 在 多 视 口 中 的 外 观 。 


在 index.html 中 ， 找 到 如 下 标记 : 


«1-- INTRO SECTION ---» 
«section class-"jumbotron" id-"welcome"-» 
«div class-"container"» 
«h1 class-"display-3"»«strong»Big«/strong» Welcome Message</h1> 



































«p class-"lead"» 

Ingenious marketing copy. And some «em»more«c/em» ingenious marketing copy.«a 
href="#features" class="btn btn-lg btn-primary pull-xs-right"»Learn more «span 
class-"icon fa fa-arrow-circle-down"»«/span»«/a» 

</p> 
</div> 
</section> 


首先 增加 高 清 图 的 高 度 ， 把 背景 图 放 进 去 。 


(1) 在 编辑 器 中 打开 定制 的 Sass 文件 scss/includes/ jumbotron.scss。 别 忘 了 在 scss/app.scss 中 
将 其 引入 。 

(2) 现在 我 们 设置 4welcome 部 分 的 高 度 、 背 景 颜色 和 字体 颜色 ， 同 时 也 为 按钮 添加 一 些 上 
外 边 距 : 


.jumbotron { 
height: 300px; 
background-color: $jumbotron-bg; 
color: $jumbotron-color; 
.btn ( 
margin-top: $spacer-y; 
) 
} 








(3) 高 清 图 的 背景 色 和 字体 颜色 是 在 scss/includes/_variable.scss 文件 中 设置 的 : 


// 高 清 图 
$jumbotron-bg: #191919; 
$jumbotron-color: contrast($jumbotron-bg); 























(4) Sass 函数 contrast () 是 在 scss/functions contrast.scss 文件 里 定义 的 ,该 函数 会 使 用 Sass 
自 带 的 亮度 调节 功能 ， 根 据 输入 参数 的 颜色 值 返回 相应 的 亮色 调 或 暗色 调 。 
在 设计 中 使 用 对 比 色 可 以 有 效 提升 项 目的 可 访问 性 。 当 字体 颜色 随 背 景色 的 改变 
而 自动 变化 , 设计 的 基色 改变 就 不 会 削弱 网 站 的 可 读 性 和 可 访问 性 。 本 章 使 用 的 
(D 是 简单 的 contrast () 函 数 ， 而 像 Compass 这 样 的 Sass 类 库 则 包含 了 其 自己 的 








对 比 函 数 。 可 以 访问 https://www.smashingmagazine.com/2014/10/color-contrast- 
tips-and-tools-for-accessibility/ , 阅读 由 Cathy O'Connor 所 撰写 的 文章 Design Accessibly, 
See Differently: Color Contrast Tips And Tools, 


(5) 接 下 来 ， 我 们 使 用 媒体 查询 为 大 屏幕 添加 背景 图 片 (根据 目前 Bootstrap 媒体 查询 默认 的 o 
断 点 值 ， 大 屏幕 指 991 像素 以 上 )。 

(6) 如 果 愿 意 ， 也 可 以 再 次 打开 并 阅读 Bootstrap 中 关于 响应 式 断 点 的 文档 。 文 档 地 址 为 
https://getbootstrap. enn dorsa: 3/layout/overview/。 可 以 通过 Sass ns om 

(7) 利用 Sass， 可 以 在 高 清 图 选择 ERR. E TC HPRCR 个 媒体 查询 。 媒体 查询 中 ， 将 
subway-906x600.jpg 指定 为 背景 。 就 这 里 的 断 点 来 说 ， el i 但 加 载 
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速度 也 很 快 : 


.jumbotron { 
Qinclude media-breakpoint-down(md) ( 
background: url('£&($images-path)subway-906x600.jpg') center center no-repeat; 


) 
) 
以 上 Sass 代码 会 编译 为 以 下 CSS 代码 : 


Gmedia (max-width: 991px) ( 
.jumbotron { 
background: url("../images/subway-906x600.jpg") center center no-repeat; 


) 
) 
(8) 保存 文件 ， 运 行 bootstrap watch 命令 并 在 浏览 器 中 观察 结果 。 应 该 看 到 新 背景 图 片 
出 现 了 ， 但 只 会 在 窗口 度 为 991 像素 或 更 小 的 时 候 才 会 出 现 。 


(9) 下 面 我 们 要 扩展 平板 大 小 视 口 中 高 清 图 的 高 度 。 为 此 ， 要 在 中 型 网 格 环境 下 写 一 个 媒体 
查询 ， 把 高 清 图 元 素 的 高 度 增加 到 480 像素 


Ginclude media-breakpoint-only (md) ( 
height: 480px; 
} 
(10) 保存 文件 ， 运 行 bootstrap watch 命令 并 在 浏览 器 中 观察 结果 。 应 该 看 到 视 口 宽度 为 
768 像素 到 991 像素 时 ， 高 清 图 的 高 度 会 变 成 480 像素 。 


(11) 接 下 来 考虑 中 及 更 大 ( 宽度 992 像素 以 上 ) 视 口 ， 此 时 把 高 清 图 高 度 增加 到 540 像素 。 
在 这 个 宽度 下 ， 就 要 使 用 更 大 的 背景 图 片 subway-1600x1060.jpg， 同 时 把 background-size iX 
置 为 cover: 


Ginclude media-breakpoint-up(l1g) ( 

height: 540px; 

background: #191919 url('£($images-path)subway-1600x1060.jpg') center center 
no-repeat; 

background-size: cover; 


} 


(12) 有 了 这 些 样式 规则 ， 当 视 口 变 大 时 ， 就 会 显示 1600 像素 宽 的 背景 图 片 了 。 
(13) 保存 文件 ， 在 浏览 器 中 测试 。 没 问题 ， 主 要 断 点 基本 都 涵盖 了 。 


执行 完 以 上 步骤 后 ， 高 清 图 的 样子 会 如 下 图 所 示 。 





















































Big Welcome 
UGER Te [= 


D^ 
/! 
Ingenious marketing copy. And some more ingenious markel yf 


Learn more © 


Lom 











请 注意 ， 我 们 调用 了 @include media-breakpoint-down (md) 混 入 ， 对 小 尺寸 的 背景 图 
HX I max-width 属性 。 使 用 媒体 查询 ， 就 可 根据 不 同 的 屏幕 尺寸 加 载 不 同 的 背景 图 片 ， 从 
而 在 手机 和 平板 端 减 少 页 面 加载 的 时 间 和 所 耗 带 宽 。 有 关 浏 览 器 文件 测试 及 媒体 查询 ,可 以 阅读 
由 Tim Kadlec 所 撰写 的 相关 文章 : https:/timkadlec.com/2012/04/media-query-asset-downloading-results/。 


接 下 来 ,我 们 为 营销 欢迎 语 添 加 样式 ， 使 其 凸显 。 























调整 高 清 图 欢迎 语 设计 
客户 希望 高 清 图 上 的 欢迎 语 格 外 大 。Bootstrap 的 display-3 样式 把 高 清 图 中 原 字 号 增 大 了 3.5 
倍 ， 我 们 想 再 增强 。 还 要 在 宽屏 幕 中 约束 欢迎 语 的 宽度 ， 并 在 其 后 放置 一 个 半 透 明 的 盒子 。 


基于 现 有 的 结果 , 我 们 需要 在 小 和 超 小 屏幕 中 减少 字号 。 然 而 , 在 文本 后 放置 一 个 半 透 明 的 
黑 盒 子 ， 可 以 增强 文字 对 比 。 下 面 就 来 试 试看 。 


(1) 在 index.html 中 , 高清 图 container 类 内 部 ,添加 一 个 新 的 类 为 welcome-message 的 
div 标签 ， 包 含 ni 标题 和 段落 。 









































<section class-"jumbotron"» 
«div class-"container"» 
«div class-"welcome-message"» 
«hl class-"display-3"»«strong»Big«/strong» Welcome Message</h1> 
«p class-"lead"» 

Ingenious marketing copy. And some «em»morec/em» ingenious marketing copy.«a 
href-"f£features" class="btn btn-lg btn-primary pull-right"»Learn more «span 
class-"icon fa fa-arrow-circle-down"»«/span»«/a» 

</p> 

</div> 
</div> 

</section> 





(2) 现在 为 这 个 div 添加 样式 ， 在 scss/includes/ jumbotron.sccs 文件 中 执行 以 下 几 步 : 
口 使 用 HSLA 添加 半 透 明 黑 色 背 景 ; 
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T 

















a 使 用 container uo UNE 图 设置 为 相对 定位 ， 以 便 确定 欢迎 语 的 位 置 ; 
口 给 欢迎 语 添 加 内 边 
a BUR IR strong im 把 Big 变 成 大 写 ， 同 时 增 大 字号 。 


.jumbotron { 
.container ( 
position: relative; 
height: 100$; 
.welcome-message { 
background-color: hs1a(0,0,1$,0.4); // translucent overlay 
position: absolute; 











top: 0; 
left: 0; 
right:0; 


Ginclude media-breakpoint-up(1g) (right: 50$;) 
bottom: auto; 
padding: 20px 40px; 
strong { 
font-size: 1.5em; 
text-transform: uppercase; 
j 
Ginclude media-breakpoint-down(sm) ( 
.display-3 (font-size: 1.5em;) 
j 





j 
} 


口 将 其 设 为 绝对 定位 , 并 通过 将 上 、 下 、 左 、 左 的 值 设置 为 0, 将 其 拉 伸 至 与 高 清 图 





如 一样 大 小 ; 





(3) 保存 文件 ， 运 行 bootstrap watch 命令 并 在 浏览 器 中 观察 结果 。 应 该 能 看 到 背景 变 暗 











T, 文本 在 这 个 深 色 背景 上 也 更 加 突出 ， 如 下 图 所 示 。 





BIG welcome Message 


Ingenious marketing copy. And some more 
ingenious marketing copy. 


Learn more © 








(4) 最 后 ， 我 们 再 针对 中 、 大 视 口 进 。 在 中 、 大 视 口中 ， 我 们 想 限 制 欢迎 

















这 次 要 再 用 到 Sass 媒体 查询 混入 : 





语 语 的 宽度 。 
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.jumbotron { 
.Container { 
.welcome-message { 
right: 0; 
QGinclude media-breakpoint-up(lg) ( 
right: 50%; 
} 
} 
} 
) 





(5) 同样 ， 保 存 文件 并 在 浏览 器 里 查看 结果 。 在 大 视 口 中 可 看 到 下 图 所 示 的 结 


BIG 


Welcome 


Message 


Ingenious marketing copy. And some more ingenious 
marketing copy. 


Learn more © 








使 命 达成 ! 








我 们 定制 的 高 清 图 就 此 完成 , 满足 了 客户 显示 超大 欢迎 语 的 要 求 ， 同 时 还 能 适应 平板 、 手 机 
等 设备 的 视 口 。 关 键 是 我 们 在 此 运用 了 移动 优先 的 原则 。 


下 面 是 功能 列表 。 




















8.7 ”美化 功能 列表 
我 们 的 目标 是 增 大 图 标 ， 居 中 对 齐 文本 ， 以 及 平整 网 格 布局 。 看 一 下 功能 列表 的 标记 结构 : 


<section id="features"> 
«div class="container"> 
«hl»Features«/h1» 
«div class="row"> 
«div class-"features-item col-md-4"-» 
«span class-"icon fa fa-cloud"»«/span» 
«h2»Feature 1«/h2» 
«p»Donec id elit non mi porta gravida at eget metus. Fusce 
dapibus, tellus ac cursus commodo. 


</p> 











</div> 


每 个 功能 都 有 自己 的 图 标 、 标 题 和 段落 ， 封 装 在 自己 的 div 标签 中 ， 这 个 标签 有 两 个 类 : 


features-item 和 col-md-4。 
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知道 了 标记 结构 ， 接 下 来 写 需 要 的 样式 。 


(1) 创建 一 个 名 为 scss/includes/_features.scss 的 新 的 Sass 局 部 文件 ， 
scss/app.scss 文件 中 。 


Gimport "includes/navbar"; 
Gimport "includes/jumbotron"; 
Gimport "includes/features"; 


Q) 在 编辑 器 中 打开 该 文件 ， 新 开放 一 块 ， 并 添加 注释 ,表明 是 功能 区 的 样式 。 


// 功能 区 
#features { 


} 


(3) 针对 . feam ns 居中 文本 ， 
错 ， 同 时 将 . icon 字号 增 大 为 90 像素 。 


#features { 
.features-item ( 


Jes TEES AE] 








添加 内 边 距 ， 并 设 定 高 度 以 避免 浮动 项 彼此 交 











text-align: center; 
padding: 20px; 
height: 270px; 
.icon ( 
font-size: 90px; 
j 
j 
} 
(4) 保存 文件 ， 在 浏览 器 中 测试 结果 。 运 行 bootstrap watch 命令 ， 在 中 视 口 中 应 该 看 到 
下 图 所 示 的 效果 。 
Oc 
e» [^] D 
Feature 1 Feature 2 Feature 3 


Donec sed odio dui. Cras justo odio, dapibus ac 
facilisis in, egestas eget quam. 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 


commodo. commodo. 
Ø (e up 
Feature 4 Feature 5 Feature 6 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 
commodo. 





Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 
commodo. 


Donec sed odio dui. Cras justo odio, dapibus ac 
facilisis in, egestas eget quam. 











(S) REY 下 面 针对 小 


屏幕 调整 功能 列表 。 当 前 ,每 个 . features-itenm 都 有 类 











而 我 们 希望 在 小 屏 





col-md-4, 


幕布 局 中 显示 为 下 图 所 示 的 两 栏 ， 相 应 地 要 添加 类 col-sm-6。 
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Feature 1 Feature 2 
Donec id elit non mi porta gravida Donec id elit non mi porta gravida 
at eget metus. Fusce dapibus, at eget metus. Fusce dapibus, 
tellus ac cursus commodo. tellus ac cursus commodo. 
Feature 3 Feature 4 
Donec sed odio dui. Cras justo Donec id elit non mi porta gravida 
odio, dapibus ac facilisis in, at eget metus. Fusce dapibus, 
egestas eget quam. tellus ac cursus commodo. 

















(6) 当然 ， 在 超 小 屏幕 中 ， 功 能 项 自己 会 变 成 一 栏 。 
(7) 可 是 , 在 超 小 屏幕 范围 之 上 ， 即 500 像素 到 767 像素 的 时 候 , 全 宽 布 局 会 导致 描述 文本 太 宽 。 
(8) 解决 这 个 问题 需要 再 添加 一 个 媒体 查询 ， 为 .features-item 设置 最 大 宽度 ， 同 时 设置 


水 平 外 边 距 为 auto 将 内 容 居中 。 


// 功能 区 
#features { 
Ginclude media-breakpoint-only (xs) ( 
margin: 0 auto; 
max-width: 320px; 
} 





























} 
(9) Bootstrap 中 的 m-x-auto 类 能 将 固定 宽度 的 块 级 内 容 水 平 居 中 。Bootstrap 3 中 与 该 CSS 


类 功能 相对 应 的 是 center-block 类 。 
(10) 有 了 以 上 限制 ，. features-item 元 素 在 任何 视 口 中 都 会 保持 理想 的 宽度 ! 在 小 窗口 


中 ， 显 示 效 果 如 下 。 





























Features 


Feature 1 


Donec id elit non mi porta gravida at 
eget metus. Fusce dapibus, tellus ac 
cursus commodo. 


Feature 2 
Donec id elit non mi porta gravida at 
eget metus. Fusce dapibus, tellus ac 
cursus commodo. 














此 时 ， 我 们 又 满足 了 客户 对 其 网 站 这 一 部 分 的 要 求 。 下 一 步 可 以 考虑 用 户 评论 区 了 。 





250 第 8 章 单 页 面 营销 网 站 





8.8 ”装饰 用 户 评 论 区 


满意 的 用 户 的 评论 。 在 这 一 部 分 , 我 们 看 到 的 是 满意 的 用 户 的 评论 和 笑脸 , 还 有 他 们 对 我 们 


客户 的 商品 的 赞美 之 词 。 








本 节 我 们 将 再 次 使 用 Card 模块 。 如 第 4 章 所 提 到 的 ，Card 模块 是 一 个 灵活 而 又 可 扩展 的 容 


大 ， 用 于 替换 旧版 本 Bootstrap 中 的 panel, thumbnail 和 well 组 件 。 
第 7 章 也 用 到 了 Card 模 块 。 














第 4 章 用 Card 模块 创建 了 砌 体 网 格 布局 。 该 布局 会 根据 可 用 的 垂直 空间 ， 以 最 优 的 方式 排 
列 元 素 位 置 ， 就 像 在 墙 上 砌 石 砖 一 样 。 本 节 ， 我 们 将 在 Impact 区 域 再 次 使 用 这 种 砌 体 网 格 布局 。 


























Bootstrap 中 的 砌 体 网 格 解决 方案 只 使 用 到 了 CSS。 如 果 你 需要 一 个 文 





持 旧 版 本 浏览 絮 的 


JavaScript 砌 体 网 格 方案 的 话 ， 可 以 使 用 相关 插件 ， 如 http://masonry.desandro.com。 
Card 模 块 中 ,分 栏 的 实现 使 用 了 CSS 里 的 multi-column 布 局 ,相关 信息 可 参考 https://developer. 





mozilla.org/en-US/docs/Web/CSS/CSS Columns/Using multi-column layouts。 


由 于 IE9 及 之 前 的 浏览 器 不 支持 CSS 里 的 column-* 属 性 , 因此 在 这 些 | 
使 用 砌 体 网 格 布 局 。 


一 开始 的 标记 结构 为 : 


«1-- IMPACT SECTION ---» 
«section id-"impact"» 
«div class-"container"» 
«hl»Impact«/h1» 
«div class-"reviews card-columns"- 


每 一 条 评论 都 像 下 面 这 样 使 用 hrevievw 微 格式 标记 : 








日 版 本 浏览 需 下 无 法 





微 格 式 标记 是 HTML 的 一 个 扩展 ， 用 于 标记 像 个 体 、 组 织 、 产 品 和 评论 等 信息 。 
使 用 微 格 式 标记 的 站 点 可 以 发 布 一 个 标准 API， 从 而 可 以 让 搜索 引擎 、 浏 览 器 以 

qp 及 别 的 工具 优化 结果 。 其 中 , h-review 是 一 个 简单 开放 的 微 格式 ， 用 于 发 布 评 
论 信息 。 更 多 信息 可 参考 : http://microformats.org/。 


«div class-"hreview review-item-1 card"> 
«img class-"card-img img-fluid" src-"((root))images/smilingl- 
by-RomainGuy-600x900.jpg" alt-"Customer Photol"> 
«div class-"caption card-img-overlay"-» 
«blockquote class-"description card-img-overlayquote"'-» 
«p»Lorem ipsum dolor sit amet, consectetur adipiscingelit. 
Proin euismod, nulla pretium commodo ultricies«c/p» 
«footer»Smiling Customer1</footer> 
«/blockquote- 
«/div» 
</div> 
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每 张 卡 片 中 的 图 片 都 拥有 img-fluia 类 ， 从 而 可 以 适 配 卡 片 的 大 小 ， 具 备 响应 式 的 特性 。 














card 和 card-img 类 会 将 图 片 变 成 卡片 容 需 的 背景 ， 同 时 通过 设置 卡片 元 素 的 position 值 
为 relative， 而 图 片 元 素 的 position 值 为 absolute， 将 背景 图 片 和 卡片 中 的 文字 重 县 。 


由 于 选择 符 card-columns 类 的 使 用 ， 网 格 布局 会 自动 调整 每 张 卡片 的 位 置 。 


card-columns 类 会 在 除 超 小 型 网 格 以 外 的 环境 下 默认 设置 CSS 分 栏 。 在 超 小 型 网 格 环境 
下 ， 网 格 项 会 垂直 堆 琶 显示 。 可 用 scss/includes/ impact.scss 文件 里 的 SCSS 代码 ， 在 小 型 网 格 环 
境 下 设置 两 栏 布局 。 


.card-columns { 
column-gap: $card-columns-sm-up-column-gap; 
Ginclude media-breakpoint-up(sm) ( 
column-count: 2; 

} 

@include media-breakpoint-up(md) { 
column-count: 3; 

} 

> .card { 
// 见 https://github.com/twbs/bootstrap/pull/18255#issuecomment-237034763 
display: block; 

J 

} 


有 关 hreview 微 格式 的 更 多 信息 ， 可 参考 http://microformats.org/wiki/hreview-examples。 














保存 修改 并 运行 bootstrap watch 命令 。Impact 区 域 应 如 下 图 所 示 。 





Impact 
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我 们 知道 ,月 





当前 这 样 的 结构 ， 无 论 从 语义 角度 ， 还 是 从 呈现 角度 ， 都 为 我 们 提供 了 很 好 的 基础 。 





目 户 评论 区 最 终 要 做 成 砌 体 布局 的 样子 ,图 片 有 横 也 有 坚 。 


为 了 证 照片 中 的 脸 部 











都 露出 来 ， 同 时 有 地 方 到 加 简短 的 赞扬 文字 ， 我 们 把 所 有 图 片 都 处 理 成 了 同 宽 。 
在 针对 大 视 口 调整 布局 之 前 ， 我 们 先 来 为 说 明 元 素 添 加 样式 。 


8.8.1 





定位 及 美化 说 明 














我 们 要 把 说 明 元 素 放 到 对 应 用 户 照 片 的 上 面 。 








(1) 在 打开 的 scss/includes/_impact.scss 文件 中 ， 添 加 针对 ##mpact 部 分 的 注释 和 选择 符 。 


// Impact 区 域 
#impact ( 
} 


(2) 现在 可 以 为 说 明 元 素 添加 样式 了 。 我 们 要 为 每 张 图 片 添加 半 透 明 的 背景 ， 


位 到 图 片 底部 。 


.hreview { 
.caption { 


} 


(3) 下 面 就 是 评论 文字 了 ， 我 们 要 指定 外 边 距 、 边 机 


} 


position: 
top: auto; 
left: 10px; 

right: 10px; 

bottom: 0; 

line-height: 1.1; 

background: hs1a(0,0,10$,0.55); 


absolute; 














blockquote { 


} 


(4) 下 面 再 给 训 


margin-top: 
border: 


4px; 
none; 


font-family: Gfont-family-serif; 


font-size: 
color: 


Gfont-size-large; 
#fff; 





.reviewer { 


} 


margin-top: 
margin-bottom: 
text-align: 
GOlor 


2px; 

4px; 
right; 
$gray-lighter; 


iral 


、 字 体 、 


F 论 者 的 名 字 指 定 样式 ， 应 该 出 现在 评论 


并 将 其 绝对 定 





字号 和 颜色 。 


内 容 之 下 。 
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(5) 保存 文件 ， 运 行 bootstrap watch 命令 ， 查 看 进度 。 
(6) 应 该 看 到 Impact 区 域 的 结果 如 下 图 所 示 。 





Impact 


Lorem ipsum dolor sit amet 
E 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
la pretium 


orem ipsum 2 ore dolor sit amet 
lor sit amet 














8.8.2 调整 说 明 元 素 的 位 置 


看 看 以 上 截图 中 的 可 用 空间 , 再 在 不 同 视 口 宽度 下 检查 一 下 响应 式 网 格 中 县 加 文本 的 变化 情 
况 。 你 会 发 现 自己 需要 针对 每 个 说 明 元 素 设 置 样式 ， 以 保证 对 相应 用 户 图 片 位 置 最 合适 。 


这 就 是 review-item-1、review-item-2 这 些 类 可 以 派 上 用 场 的 地 方 。 通 过 它们 就 可 以 
针对 每 条 说 明 分 别 设置 样式 ， 与 图 片 匹配 。 


为 了 演示 说 明 元 素 的 位 置 ， 在 scss/includes/ impact.sess 文件 中 添加 如 下 代码 行 : 












































.hreview:nth-child(2n) .caption ( 
top: 0; 
left: 62$; 
right: 10px; 
bottom: auto; 
.reviewer { 
margin-top: 6px; 
text-align: left; 





} 

} 

.hreview:nth-child(3n) .caption { 
tops 05 


left: 17$; 
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right: 10px; 
bottom: auto; 
} 


上 面 的 标记 针对 每 第 二 个 和 每 第 三 个 说 明 元 素 调 整 了 其 位 置 ， 得 到 了 如 下 结果 。 





" 











ne” 
Lorem ipsumdolor sit amet elit. 


Smiling Customer6 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 

| euismod, nulla pretium 
commodo ultricies 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla pretium 
commodo ultricies 


Smiling Customer1 Smiling Customer£ 


Lorem ipsum dolor sit amet, 1 
consectetur adipiscing elit. Proin Lorem ipsum dolor sit amet ... 
Lorem ipsum dolor sit amet euismod, nulla elit: 


Emilin Smiling Customer? 














除了 以 上 使 用 :nth-chilad() 选 择 符 的 做 法 外 ， 也 可 以 自行 编写 SCSS 代码 来 调整 特定 说 明 
元 素 的 位 置 。 

调整 超 小 屏幕 中 的 情况 

在 超 小 网 格 环境 中 ,评论 是 堆 释 显示 的 ; 而 在 小 型 网 格 环境 下 ， 则 呈现 为 两 栏 。 











首先 , 在 小 尺寸 网 格 中 , 缩小 说 明 元 素 的 字号 。 在 scss/includes/ impact.sess 文件 中 添加 以 下 
SCSS 代码 : 


#impact { 
.caption ( 

blockquote ( 
font-size: $font-size-sm; 
Ginclude media-breakpoint-only(sm) ( 

font-size: $font-size-1g; 

j 

j 


) 
在 小 型 和 超 小 型 网 格 中 , 只 显示 前 四 个 评论 , 并 用 以 下 SCSS 代码 默认 隐藏 其 余 的 评论 信息 : 








// Impact 区 域 
dimpact ( 
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.hreview:nth-child(5), .hreview:nth-child(6) ( 
display: none; 
Ginclude media-breakpoint-only (md) ( 
display: block; 
} 
} 
} 


保存 文件 并 在 浏览 如 中 测试 结果 。 
好 了 ， 用 户 评论 部 分 已 经 完全 达到 客户 要 求 。 
现在 我 们 继续 客户 期 望 的 主页 设计 的 最 后 一 个 项 目 : 价目 表 。 





8.9 吸引 人 的 价目 表 
我 们 再 来 看 一 眼 客 户 提供 的 设计 图 ， 看 看 客户 期 望 的 结果 在 桌面 设备 屏幕 中 是 什么 样 的 。 











oign up now! 





PREMIUM PLAN 
BASIC PLAN $ PRO PLAN 
$19 29 539 
Feature Name Fasié Maiek Feature Name 
Feature Name -" 一 Feature Name 


Sign up now! 











我 们 得 考虑 如 何 达 到 期 望 的 结果 ， 以 及 在 其 他 尺寸 的 视 口中 需要 如 何 调 整 它们 的 布局 。 


8.9.1 准备 变量 、 文 件 和 标记 


如 前 面 的 屏幕 截图 所 示 , 这 个 设计 方案 中 涉及 几 个 表格 。 我们 可 以 先 从 调整 与 表格 相关 的 几 
个 基础 变量 开始 。 这 些 变量 都 在 _variables.scss 文件 中 。 搜 索 表 格 部 分 ， 然 后 调整 与 背景 、 强 调 














的 行 和 边框 相关 的 变量 , 调整 后 的 结果 保存 在 scss/includes/ variables.sess 本 地 文件 里 ,代码 如 下 
所 示 
// 表格 
// 
// 定制 表格 组 件 基础 值 ， 通 用 于 所 有 表格 
stable-cell-padding: .75rem; 
stable-sm-cell-padding: .3rem; 
$table-bg: transparent; 
$table-bg-accent: hsla(0,0,12$,.1); // 生成 条 带 效 果 
S$table-bg-hover: hsla(0,0,1$,.2); 
$table-bg-active: $table-bg-hover; 
$table-border-width: 1px; 
$table-border-color: $gray-lighter; 











保存 文件 ， 运 行 bootstrap watch 命令 ， 可 以 看 到 下 图 所 示 的 结果 。 





Sign up now! 


Basic Plan Premium Plan Pro Plan 

$19 $29 $39 

Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 


Sign up now! Sign up now! Sign up now! 





























这 是 一 个 起 点 。 接 下 来 我 们 需要 写 更 具体 的 样式 。 
为 了 保存 这 些 样式 ， 我 们 再 为 价目 表 创 建 一 个 新 的 Sass 文件 。 


(1) 在 scss/includes 文件 夹 中 创建 _pricing-tables.scss。 
(2) 在 main.scss 中 引入 这 个 文件 。 


@import " pricing-tables.scss"; 

(3) 在 编辑 器 中 打开 _pricing-tables.scss， 开 始 在 里 面 写 新 样式 。 
， 在 写 新 样式 之 前 ， 我 们 还 是 先 来 看 看 表格 的 标记 。 

在 每 个 表格 标记 的 父 元 素 中 ， 我 们 已 经 应 用 了 下 面 的 特殊 类 : 


口 package package-basic 
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口 package package-premium 





D package package-pro 


比如 ， 第 一 个 表格 ， 它 的 父 aiv 的 标记 就 是 这 样 的 : 


«div class-"package package-basic col-1g-4"> 
«table class="table table-striped"'» 























请 注意 上 述 HTML 代码 中 的 table fll table-striped 2E, 它们 是 Bootstrap 中 用 于 调整 呈 
现 内 容 的 工具 类 。 可 以 将 基础 类 table 加 到 任意 一 个 <table> 元 素 上 ,使 用 预定 义 好 的 样式 。 
同时 ， 也 可 定制 样式 规则 扩展 基础 类 ， 或 者 使 用 table-striped 等 Bootstrap 里 的 修正 类 。 有 
关 Bootstrap 中 的 表格 的 相关 信息 ， 可 参考 http://v4-alpha.getbootstrap.com/content/tables/。 








类 似 地 ， 第 二 和 第 三 个 表格 的 父 元素 分 别 加 入 了 package package-premium 和 package 


package-pro 25, 


这 些 父 容器 通过 col-ma-4 类 提供 了 基本 的 布局 样式 ， 即 在 中 及 以 上 视 口中 会 排 成 三 栏 。 
下 面 我 们 分 析 每 个 表格 的 标记 。 在 第 一 个 基本 配置 表 中 ,已 经 应 用 了 table 和 table- 


striped 类 : 


























«table class="table table-striped"> 


这 个 表格 使 用 <thead> 元 素 作为 最 顶层 的 包含 块 。 在 这 个 元 素 内 部 ， 是 一 个 跨 两 栏 的 <th>， 
其 中 包含 <n2> 标 题 ， 是 包 名 称 ， 还 有 一 个 <div class-'price's, 标注 价格 : 








<thead> 
xr 
«th colspan-"'2"» 
«h2»2Basic Plan</h2> 
«div class-"price"'»5$19«/div» 
«/th» 
«/tr» 
</thead> 


再 后 面 是 包含 Sign up Now! 按 钮 的 tfoot 标签 : 


«tfoot» 
<tr><td colspan-"2"»«a href="#" class-"btn"»Sign up 
now!«/a»«/td»«/tr» 

«/tfoot» 


然后 是 tbody 标签 ， 包 含 一 组 功能 列表 ， 很 直观 ， 每 行 两 栏 : 


«tbody» 
«tr»«td»Feature«c/td»«td»Name«c/td»«/tr» 
«tr»«td»Feature«c/td»«td»Name«c/td»«/tr» 
«tr»«td»Feature«c/td»«td»Name«c/td»«/tr» 
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«tr»«td»Feature«c/td»«td»Name«c/td»«/tr» 
«tr»«td»Feature«c/td»«td»Name«c/td»«/tr» 
«/tbody» 


最 后 ， 当 然 是 两 个 关闭 标签 ，table 标签 和 父 div 标签 : 


</table> 
«/div»«!-- /.package .package-basic --» 


其 他 两 个 表格 的 结构 也 都 一 样 。 这 就 是 我 们 下 一 步 工作 的 基础 。 


8.92 ”美化 表格 头 
要 美化 所 有 表格 的 表格 头 元 素 ， 需要 做 以 下 几 件 事 : 














口 居中 文本 ; 
口 添加 与 最 终 版 本 接近 的 中 性 灰 作 为 背景 颜色 ; 
口 把 字体 颜色 改 为 白色 ; 











口 把 n2 标题 转换 为 大 写 ; 

a 增 大 价目 表 的 尺寸 ; 

口 给 表格 添加 必要 的 内 边 距 。 

完成 以 上 美化 工作 ， 只 要 下 面 几 行 代 码 即 可 。 这 里 我 们 把 所 有 针对 表格 的 样式 都 放 到 


#signup 选择 符 中 : 








#signup ( 
table ( 
border: 1px solid $table-border-color; 
thead th ( 


text-align: center; 

background-color: $gray-light; 

color: dfff; 

padding: 2 * $spacer-y 0; 

h2 ( 
text-transform: uppercase; 
font-size: 2em; 

j 

j 
j 
} 


简单 来 说 ,这些 样式 完成 了 除 增 大 价目 表 尺寸 之 外 的 所 有 工作 。 我 们 可 以 在 这 个 基础 上 , 开 
始 添 加 样式 ， 仍 然 在 #signup 选择 符 内 : 


.price ( 
font-size: 4em; 
line-height: 1; 

} 


这 样 就 得 到 了 下 面 的 结 
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BASIC PLAN 
$19 


这 就 接近 我 们 预期 的 结果 了 ， 但 我 们 想 缩小 美元 符号 。 可 以 把 第 一 个 字符 脱 套 在 .price FÉ 
mus 


.price ( 
font-size: 4em; 
line-height: 1; 
&::first-letter ( 
font-size: .5em; 
vertical-align: super; 
) 
} 


作为 伪 类 元 素 ，: : first-letter 可 用 于 调整 元 素 中 第 一 个 字符 的 样式 ， 而 无 须 在 HTML 
层面 用 <span> 标 签 将 该 字符 包 起 来 。 有 关 伪 类 元 素 的 更 多 信息 ， 可 参考 https:/css-tricks.comy 


almanac/selectors/f/first-letter/ s 


以 上 代码 行 就 缩小 美元 符号 为 原来 的 一 半 , 2P ELDUDSET. 下面 的 屏幕 截图 就 是 现在 的 结果 。 
BASIC PLAN 
519 
8.9.3 调整 表 体 和 表 脚 样式 


同样 以 三 个 价目 表 样 式 为 目标 ， 统 一 做 如 下 调整 


a 给 功能 列表 添加 左 、 右 内 边 距 ; 
口 把 按钮 拉 伸 至 全 宽 ，; 
a 增 大 按钮 尺寸。 


用 下 面 的 规则 就 可 以 实现 : 


#signup ( 
table { 
tbody ( 
td ( 
padding-left: $spacer-x; 
padding-right: $spacer-x; 
} 
} 
a.btn { 
Gextend .btn-1g; 
font-size: 1.25em; 
display: block; 
width: 1003; 
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background-color: $gray-light; 
color: d fff; 
j 
j 
} 
上 述 SCSS 代码 中 ，@extenq 功能 用 于 扩展 Bootstrap 里 大 按钮 的 样式 。Bootstrap 源 代码 中 


会 避免 使 用 eextenad 功能 ， 但 我 们 作为 开发 人 员 可 以 自由 使 用 。 
除了 上 面 的 做 法 ,也 可 以 使 用 Bootstrap 中 的 button-size() 混 入 来 设置 大 按钮 
样式 。 可 以 回顾 第 1 章 ， 阅 读 更 多 有 关 e@extena 功能 的 内 容 。 请 注意 ， 上 面 的 
代码 中 字号 设 为 了 1.25em， 从 而 以 父 元 素 的 字号 为 基准 。 如 果 使 用 混入 的 话 ， 
字号 的 单位 为 rem。 


保存 文件 ， 运 行 bootstrap watch 命令 ， 应 该 可 以 看 到 下 面 的 结 





Feature Name 
Feature Name 
Feature Name 
Feature Name 
Feature Name 














公共 的 样式 完成 了 ， 接 下 来 可 以 考虑 差异 化 了 。 


8.9.4 ”为 不 同 的 价目 表 添加 不 同 的 样式 


我 们 先 来 给 不 同 的 价目 表 的 表 头 和 Sign up now! 按 钮 添加 预期 的 颜色 。 在 客户 给 我 们 的 设计 
图 中 ，Basic ERE, Premium 是 绿色 ，Pro 是 红色 。 下 面 我 们 准备 配色 ， 将 选择 好 的 颜色 值 新 
变量 指定 给 三 级 品牌 色 ， 如 下 所 示 : 











sbrand-primary: #428bca; 
Sbrand-secondary: #5cb85c; 
sbrand-tertiary: #d9534f; 








设置 完 颜 色 变量 ,就 可 以 将 它们 有 效应 用 到 表 头 和 按钮 元 素 上 了 。 此 时 要 用 到 前 面 给 每 个 表 
格 的 父 元 素 添加 的 特定 的 类 ， 也 就 是 package-basic、package-premium 和 package-pro: 





(1) 在 sess/includes/ pricing-tables.scss 文件 中 ， 新 写 一 段 注 释 : 
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// 价目 表 颜 色 


Y 


(2) 在 这 里 我 们 给 .package-basic 表 应 用 主 品牌 色 ebrand-primary 变量 , 先 在 thead th 
元 素 中 试验 一 下 : 


#signup .package-basic table ( 
thead th ( 
background-color: $brand-primary; 


) 


(3) 然后 再 把 主 品 牌 色 应 用 给 thead cn 元素 的 按钮 ,这 里 ,我们 还 使 用 了 bootstrap/mixins.less 
文件 中 的 .button-variant () 混 入 给 :hover 和 :active 状态 应 用 样式 。 这 个 混入 接受 三 个 参 
数 : 颜色 、 背 景 颜色 和 边框 颜色 。 我 们 是 这 样 定义 的 : 








.btn ( 
Ginclude button-variant(H4fff, $brand-primary, darken(S$brand-primary, 5%)); 


) 
(4) 编译 之 后 ， 这 个 简洁 的 混入 就 会 给 按钮 及 其 悬 停 、 选 中 状态 生成 对 应 的 样式 ! 


要 了 解 button-vatriant () 混 入 的 原理 ,可 以 参考 bootstrap/scss/mixins/_buttons. 
€) scss 中 的 定义 ， 以 及 bootstrap/scss/ buttons.scss 文件 ， 其 中 使 用 这 个 混入 定义 了 
Bootstrap 默认 的 按钮 类 。 

















(5) 现在 ， 需 要 对 .package-premium 表 重 复 上 述 过 程 ， 只 不 过 这 次 要 使 用 $brand- 


secondary 变量 : 
#signup .package-premium table ( 
thead th { 
background-color: $brand-secondary; 
} 
和 
Ginclude button-variant(H4fff, $brand-secondary, darken($brand-secondary, 5 各 ) ) 
} 


(6) 最 后 ， 青 给 .package-pro 表 应 用 第 三 品牌 色 变 量 sbrand-tertiary: 
#signup .package-pro table ( 
thead th ( 


background-color: $brand-tertiary; 


) 


bun: t 
Ginclude button-variant(H4fff, $brand-tertiary, darken($brand-tertiary 52)); ce 
} 
} 


(7) 你 也 许 已 经 注意 到 ， 上 面 的 代码 高 度 重 复 。 可 以 借助 Sass， 编 Edid DRY 原则 的 CSS 
代码 。 通 过 将 规则 名 封装 到 Sass 映射 表 中 并 使 用 eeach 循环 ， 即 可 实现 这 一 点 。 
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你 也 可 阅读 拙 作 Sass and Compass Designer s Cookbook， 学 习 如 何在 Web 项 目 中 
省 用 Sass 编写 高 效 的 、 可 维护 、 可 复 用 的 CSS 代码 ,详情 可 访问 https://www.packtpub. 
com/web-development/sass-and-compass-designers-cookbook o 


(8) 保存 文件 ， 运 行 bootstrap watch 命令 。 应 该 看 到 应 用 了 新 颜色 的 表格 ， 如 下 图 所 示 。 




















BASIC PLAN PREMIUM PLAN PRO PLAN 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Feature Name 
EEE 
aA 
非常 好 ! 


好 了 ， 接 下 来 解决 表格 对 不 同 视 口 的 适 配 问 题 。 


8.9.5 ERRO 
由 于 Bootstrap 对 响应 式 设 计 的 重视 ， 我 们 的 表格 在 跨 视 口 断 点 切换 时 都 表现 得 很 好 。 前 面 


已 经 看 到 在 中 型 宽度 视 口中 表格 的 表现 了 , 在 大 屏幕 中 ,表格 会 扩展 的 更 宽 。 而 在 小 视 口 中 , JL 
个 表格 则 会 垂直 堆 琶 显示 ， 非 常 不 错 。 


可 是 ,在 大 约 480 像素 到 768 像素 宽度 之 间 的 时 候 ， 表 格 会 扩展 到 与 屏幕 同 宽 。 很 明显 ， 这 
FRA SE T 


因为 只 有 三 个 表格 , 所 以 不 可 能 考虑 两 栏 布局 的 方案 。 只 能 限制 表格 宽度 , 并 使 用 自动 的 左 、 
右 外 边 距 使 它们 居中 排列 。 我 们 使 用 media-breakpoint-down () 这 一 媒体 查询 混 人 ， 把 表格 
的 最 大 宽度 设置 为 400 像素 ， 再 使 用 水 平 外 边 距 auto 的 方式 让 表格 居中 : 











// 
// 限制 小 及 超 小 屏幕 的 宽度 
// ------ 


Ginclude media-breakpoint-down(sm) ( 
#signup .package ( 
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max-width: 400px; 
margin: 0 auto; 
} 
} 
使 用 Sass 中 的 aextena 功能 来 扩展 .m-x-auto， 无 法 使 表格 居中 显示 ， 因 为 我 们 无 法 在 
emedia 语句 内 部 来 扩展 外 面 的 选择 符 : 
#signup { 
font-size: 100%; 
Ginclude media-breakpoint-only (md) { 
font-size: 70$; 
} 
} 


保存 文件 ， 并 在 浏览 器 中 测试 结果 。 应 该 可 以 看 到 宽度 受 限 的 表格 在 窗口 内 居中 了 。 

此 时 ， 三 个 表格 颜色 上 有 了 差异 ,而 且 具 备 了 响应 性 。 可 是 还 差 一 点 呢 ， EP, KWO, R 
们 希望 Premium 方案 能 够 更 突出 。 
8.9.6 给 表格 以 视觉 层 


再 看 一 眼 设计 图 ， 就 会 发 现 我 们 的 设计 ， 至 少 在 桌面 级 视 口 中 ， 应 该 在 视觉 上 强调 中 间 的 
Premium 方案 : 文字 应 该 更 大 ， 而 且 视 觉 上 应 该 在 另外 两 个 表格 的 前 方 。 

这 个 效果 通过 调整 内 边 距 、 外 边 距 和 字号 就 可 以 实现 。 我 们 要 在 针对 中 、 大 视 口 的 媒体 查询 
中 添加 样式 : 


// 
// 视觉 上 增强 Premium 方案 


























QGinclude media-breakpoint-up(md) ( 
) 


我 们 的 第 一 个 目标 是 要 缩小 表格 之 间 的 距离 。 这 可 以 通过 缩小 网 格 栏 之 间 的 间距 来 实现 : 


#signup ( 
// 把 表格 挤 在 一 起 
.col-md-4 { 
padding: 0; 
) 
} 


然后 ， 增 大 Premium 块 的 字号 : 


#signup ( 
.package-premium .price ( 
font-size: 7em; 
} 
} 
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在 这 个 媒体 查询 中 ， 我 们 首先 减少 Basic 表 和 Pro 表 ( 即 第 一 和 第 三 个 表 ) 的 宽度 ， 再 


们 添加 一 些 上 外 边 距 ， 将 它们 推 下 一 点 : 
// 减 小 Basic 表 和 Pro 表 的 尺寸 


Signup .package-basic ( 
padding-left: 4 * $spacer-y; 
} 
signup .package-pro { 
padding-right: 4 * $spacer-y; 
} 
signup .package-basic table, 
signup .package-pro table { 
margin-top: 3 * $spacer-x; 


} 


接 下 来 增 大 Premium 表 的 字号 ， 并 为 其 按钮 添加 内 边 距 : 


// 增 大 Premium 表 的 尺寸 
#signup .package-premium table ( 
thead th { 
h2-4 
font-size: 2.5em; 
} 
} 
a.btn { 
font-size: 2em; 
padding-top: 1.5 * $spacer-x; 
padding-bottom: 1.5 * $spacer-x; 
} 
} 











保存 文件 ， 并 在 浏览 器 中 观察 结果 。 应 该 在 1200 像素 及 更 大 的 视 口中 看 到 如 下 效果 。 





PREMIUM PLAN 


^M 9 $29 


PRO PLAN 








Feature Name Fans "Res Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature 网 Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Fes Feature Name 
Sign up now! w! 


Name 
Sign up now! 








给 


[e 
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就 这 样 了 ! 至 此 , 我 们 完成 了 客户 给 我 们 提出 的 最 后 一 个 要 求 。 现 在 ， 从 整体 角度 做 一 些 修 
饰 和 调整 的 工作 。 


8.40 最 后 的 调整 


AW, 我 们 将 从 增强 页 面 整体 性 的 角度 出 发 ， 再 做 一 些 细节 的 调整 。 首 先 ， 给 页 面 中 的 每 个 
部 分 的 hl 标题 增加 必要 的 上 、 下 内 边 距 。 然 后 ,再 增强 一 下 导航 的 体验 , 即 给 导航 条 添加 ScrollSpy 
并 使 用 jQuery 将 点 击 导航 项 后 的 滚动 行为 变 成 动画 。 


先 来 增强 各 部 分 的 主 标题 。 现 在 看 一 下 这 些 标题 ,你 会 发 现 它 们 很 不 起 眼 。 我 们 的 增强 方案 
是 降低 其 对 比 度 ， 增 大 其 内 边 距 。 我 们 只 想 把 规则 应 用 给 Features, Impact 和 Sigh up ， 因 此 可 
以 通过 ID 选择 它们 。 


(1) 在 编辑 器 中 再 次 打开 scss/includes/ page-contents.scss 文件 。 
(2) 在 文件 项 部 ， 在 给 页 面 主体 应 用 上 内 边 距 的 规则 之 后 ， 添 加 以 下 代码 行 : 


#features, #impact, #signup ( 
padding-top: $spacer-y * 2.5; 
padding-bottom: $spacer-y * 3; 
hi ( 

font-size: 5em; 
color: $gray; 
line-height: 1.3; 
padding-bottom: $spacer-y * 1.5; 
} 
} 


(3) 以 上 规则 做 的 事情 如 下 : 
m 给 这 些 部 分 添加 上 、 下 内 边 距 ; 
m 显著 增 大 hl 标题 的 字号 ; 
m 减少 标题 的 对 比 度 ; 
m 通过 设置 行 高 和 下 内 边 距 ， 保 证 标题 周围 的 空间 合适 。 


(4) 保存 并 刷新 浏览 器 ， 看 看 有 什么 不 一 样 。 















































Features 








Feature 1 Feature 2 
Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus metus. Fusce dapibus, tellus ac cursus 


commodo. commodo. 
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这 些 变化 会 体现 在 所 有 视 口 大 小 的 页 面 中 。 对 于 小 视 口 ， 目 前 的 ni 字号 太 大 了 。 因 此 还 要 
继续 调整 一 下 。 我 们 不 想 让 后 面 的 样式 影响 更 大 视 口 中 的 布局 , 所 以 得 把 所 写 的 样式 规则 封装 到 
一 个 媒体 查询 中 ， 将 其 限制 在 更 大 的 视 口 。 最 终 ， 重 构 后 的 移动 优先 的 SCSS 代码 如 下 : 


#features, #impact, #signup ( 
padding-top: $spacer-y * 1.5; 
padding-bottom: $spacer-y * 1; 
hi ( 

font-size: 3em; 

color: Sgray; 

line-height: 1.3; 
padding-bottom: $spacer-y; 

} 

@include media-breakpoint-up(md) { 
padding-top: $spacer-y * 2.5; 
padding-bottom: $spacer-y * 3; 
Dl 

font-size: 5em; 
padding-bottom: $spacer-y * 1.5; 
j 

} 

} 


调整 后 的 效果 如 下 图 所 示 。 




















Features 


Feature 1 


Donec id elit non mi porta gravida at 
eget metus. Fusce dapibus, tellus ac 
cursus commodo. 


Feature 2 
Donec id elit non mi porta gravida at 
eget metus. Fusce dapibus, tellus ac 
cursus commodo. 











改进 很 大 。 接 下 来 我 们 增强 导航 的 体验 。 


8.11 为 导航 条 添加 ScrollSpy 
我 们 要 配置 项 部 的 导航 条 , 令 其 对 应 页 面 中 的 位 置 。 下 面 给 导航 条 添加 Bootstrap 的 ScrollSpy 
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qp iX Y € Bootstrap ScrollSpy 插件 的 文档 : http;//getbootstrap.com/javascript/Ziscrollspy . 








默认 情况 下 ， 只 能 在 Bootstrap 的 nav 组 件 上 使 用 ScrollSpy 插件 。 而 我 们 之 前 使 用 的 navbar 
组 件 中 已 经 包含 了 nav 组 件 。 除 了 这 一 点 ,我 们 还 应 把 监听 的 元 素 的 position 值 设 为 relative。 
在 本 节 示 例 中 ， 则 是 需 将 body 元 素 的 position 值 设 为 relative. 
可 以 通过 在 HTML 代码 中 添加 aata 属性 ， 轻 松 地 启用 ScrollSpy 插件 。 首 先 ， 在 监听 的 元 
素 上 添加 data-spy-"scroll" 属性 ， 然后 在 其 中 设置 data-target 属性 并 设 定 值 为 .nav 组 
件 的 父 元 素 的 ID 或 类 。 
HTMLS 中 的 data 属性 可 用 来 在 标准 的 HTML 元 素 上 存储 额外 的 信息 。 可 参考 
eb https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using data attributes , 
阅读 更 多 有 关 HTMLS 中 data 属性 的 内 容 。 
为 了 让 ScrollSpy 正常 工作 , 还 需要 在 HTML 代码 中 设置 可 解析 的 目标 元 素 IDo 在 之 前 的 开 
发 步骤 中 ， 我 们 已 经 添加 了 这 些 目 标 ID 。 比 如 ， 内 容 介 绍 部 分 的 section 元 素 拥有 
idq="welcome" 的 设置 : 



































«section class-"jumbotron" id="welcome"> 
这 一 HTML 代码 保存 在 html/includes/intro.html 文件 中 。 根 据 html/includes/page-header.html 
文件 ，ia="welcome" 声 明 与 导航 条 链接 中 的 目标 ID 一 致 。 相 关 的 HTML 代码 如 下 : 


«a class-"nav-link active" href="#welcome">Welcome «span 
class-"sr-only"»(current)«/span»«/a» 


接 下 来 ， 执 行 以 下 步 又 ,在 项 目 中 启用 ScrollSpy 插件 : 


(1) 编辑 scss/app.scss 文件 ， 将 body 元 素 的 position 值 设 定 为 relative。 在 文件 未 尾 添 加 以 下 
SCSS 代码 : 


body ( 
position: relative; 


j 

(2) 在 编辑 器 中 打开 index.html, 

(3) 给 body 标签 添加 下 面 的 ScrollSpy data 属性 : 

<body data-spy="scroll" data-target=".navbar"> 

(4) 编辑 文件 ， 在 导航 条 链接 中 设置 目标 D 属性 。 改 完 后 HTML 代码 如 下 : 设置 好 目标 ID 
和 新 的 data 属性 后 ， 保 存 文件 并 刷新 浏览 器 ,在 页 面 中 用 鼠标 滚轮 上 下 滚动 一 下 。 可 以 看 到 导 
航 会 表现 出 预期 的 行为 ， 随 页 面 滚动 而 指示 当前 显示 区 域 所 在 的 位 置 ， 效 果 如 下 图 所 示 。 
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Bootstroppin  weLcome FEATURES IMPACT 
Sign up now! 














PREMIUM PLAN 


A "a $ 2 9 "33 9 


Feature Name meg neg Feature Name 
Feature Name Feature Name Feature Name 
Feature Name ems NS Feature Name 














«ul class="nav navbar-nav"'» 
«li class-"nav-item"» 
«a class-"nav-link active" href="#welcome">Welcome «span 


class-"sr-only"»(current)-«/span»«/a» 
«/li» 
«li class-"nav-item"-» 
«a class-"nav-link" href="#features">Features</a> 


AR 
«li class-"nav-item"» 
«a class-"nav-link" href="#impact">Impact</a> 
«/li» 
«li class-"nav-item"» 
«a class-"nav-link" href="#signup">Sign up</a> 


</li> 
«/ul» 


除了 这 种 用 aata 属性 来 启用 Bootstrap ScrollSpy 插件 的 方式 外 , 也 可 以 用 JavaScript 来 达到 
相同 的 效果 ， 具 体 步 又 如 下 。 
(1) 首先 ， 在 CSS/SCSS 代码 中 对 body 元 素 声明 position: relative 规则 . 
body { 
position: relative; 
} 
(2) 然后 ， 用 JavaScript/jQuery 调用 ScrollSpy : 


$('body').scrollspy({ target: '.navbar' }) 


为 滚动 添加 动画 
下 面 给 点 击 导航 后 的 页 面 滚动 添加 动画 ， 为 此 需要 使 用 jQuery。 
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jQuery 是 一 个 JavaScript 的 类 库 ， 提 供 了 HTML 文档 操作 的 一 系列 API， 包 括 : 
文档 遍历 及 元 素 操作 、 事 件 处 理 、 动 画 等 。 其 中 ，animate() API 接口 可 以 就 
CSS 属性 创建 定制 的 动画 效果 。 可 以 参考 http://api.jquery.com/animate/， 了 解 更 
多 有 关 jQuery 动画 的 信息 。 

可 以 在 main.js 文件 中 添加 以 下 代码 ， 添 加 页 面 滚动 的 动画 效果 。 


(1) 在 编辑 器 中 打开 js/main.js。 
(2) 在 $ (Gocument).ready(function() {中 添加 以 下 代码 : 


$s('#nav-main [href^=#]').click(function (e) { 
e.preventDefault(); 
var div = $(this).attr('href'); 
$("html, body").animate(( 
scrollTop: $(div).position().top 
), "slow"); 
hs 


(3) 保存 并 刷新 浏览 器 
刚才 的 代码 做 了 什么 ? 我 们 使 用 jQuery 做 了 以 下 儿 件 事 。 
口 选择 了 .navpar 元 素 中 以 页 面 位 置 中 的 锚 为 目标 的 链接 ， 同 时 监听 click 事 


$s('#nav-main [href^=#]').click(function (e) {} 


口 阻止 了 默认 的 单 击 行为 


e.preventDefault(); 




















i 








lm. 
pum 
— 
X 











Q 将 滚动 过 程 变 成 动画 ， 设 置 了 动画 速度 为 slow， 如 以 下 代码 片段 所 示 : 
$("html, body").animate(( 


scrollTop: $(div).position().top 
), "slow"); 


单 击 某 个 导航 项 ， 应 该 可 以 看 到 滚动 动画 了 ! 





8.12 ”小结 








花 点 时 间 前 后 滚动 一 下 页 面 ， 欣 赏 一 下 各 个 部 分 的 细节 ,调整 一 人 窗口， 看 看 不 同 视 口 中 的 I 
啊 应 性 如 何 。 


想 一 想 , 一 个 页 面 就 实现 了 那么 多 功能 ， 而 且 它 能 够 适 配 桌面 浏览 需 、 平 板 浏 览 需 和 手机 浏 
览 器 ， 应 该 有 不 小 的 成 就 感 吧 


























下 面 回 顾 一 下 ， 我 们 满足 了 客户 向 我 们 提出 的 设计 一 个 单 页 面 营销 站 点 的 要 求 : 使 用 
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Bootstrap 高 清 图 样式 的 大 字 欢 迎 语 , 背景 图 片 格外 抢眼 , 而 且 具 有 响应 式 特性 ; 使 用 大 尺寸 Font 
Awesome 图 标的 功能 列表 ; 砌 体 版 式 的 用 户 评论 图 片 墙 ,完美 适 配 各 种 视 口 ;注册 区 使 用 Bootstrap 
的 表格 样式 ， 并 定制 了 价目 表 , 使 其 在 中 、 大 视 口 中 更 加 突出 ; 使 用 ScrollSpy 和 jQuery 增强 了 
导航 条 ， 并 添加 了 动画 滚动 效果 。 实 现 了 上 述 设 计 之 后 ， 应 该 说 ， 没 有 什么 是 我 们 不 能 通过 
Bootstrap 实现 的 了 。 
































U 


的 所 有 细节 ; 把 Bootstrap Sass 和 JavaScript 整合 进 我 们 的 定制 项 目 文件 ; 使 用 了 更 丰富 的 Font 
Awesome 图 标 ; 调整 、 定 制 、 创 新 了 Bootstrap 的 样式 ， 从 而 达到 对 设计 结果 的 精确 控制 。 


完成 本 章 和 前 面 几 章 的 项 目 ， 相 信 你 一 定 有 很 大 收获 。 总 结 一 下 吧 : 我 们 掌握 了 Bootstrap 


接 下 来 的 最 后 一 章 将 介绍 如 何 用 Angular 2 和 Bootstrap 搭建 应 用 程序 。 





用 Bootstrap 搭建 Angular 
应 用 


























本 章 将 使 用 学 到 的 Bootstrap 技能 来 搭建 Angular 2 应 用 。Angular 2 的 前 身 是 AngularJS。 可 
以 访问 以 下 网 址 ,阅读 更 多 有 关 Angular 2 的 信息 : https://angulario/; Angular 是 一 个 开发 框架 工 
具 集 ， 最 适 于 开发 自己 的 应 用 ， 并 在 开发 过 程 中 扩展 HTML. 的 语义 。 使 用 该 框架 的 开发 环境 极 
富 表现 力 ， 可 读 性 强 且 有 助 于 快速 开发 。Angular 由 Google 和 开发 社区 共同 维护 。 


本 章 将 介绍 如 何 用 Angular 2 和 Bootstrap 来 搭建 应 用 程序 : 


a 启动 一 个 简单 的 Angular 2 应 用 程序 ; 

口 在 应 用 中 集成 Bootstrap 的 HTML 标记 结构 ; 

O Æ Angular 2 项 目 中 添加 Bootstrap 的 CSS 代码 ; 

口 使 用 原生 的 Angular 指令 ; 

口 了 解 其 他 构建 工具 ， 并 用 来 部 署 Bootstrap 4 项 目 。 


























9.1 概述 


可 以 使 用 Angular 来 构建 单 页 面 应 用 ( SPA ) 和 富 Web 应 用 程序 。Angular 在 JavaScript 和 
HTML 层面 实现 了 模型 -视图 -控制 器 ( MVC ) 的 模式 。 作 为 架构 模式 ，MVC 将 应 用 程序 切 分 为 
三 个 主要 的 逻辑 组 件 : 模型 、 视 图 和 控制 器 。 其 中 ，Angular 所 使 用 的 数据 绑 定 机 制 会 在 模型 和 
视图 之 间 自 动 同步 数据 。 


Angular 中 的 HTML 编译 器 会 在 DOM 元 素 上 添加 更 多 的 特殊 行为 。 利 用 这 一 被 称 为 指令 的 
DOM 元 素 标记 ， 即 可 让 Angular 的 编译 髓 声明 添加 到 元 素 上 的 功能 ， 以 及 具体 对 元 素 的 转换 。 
Angular 内 置 了 一 个 被 称 为 jQuery lite 或 jqLite 的 jQuery 子 集 ， 也 就 是 说 在 Angular 应 用 中 


不 应 使 用 jQuery。 而 由 于 Bootstrap 里 的 JavaScript 插件 依赖 jQuery, KE Angular 应 用 中 无 法 
且 不 应 再 使 用 这 些 搬 件 。 
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正确 的 做 法 是 使 用 Angular 里 Bootstrap 相关 的 指令 ， 替 换 Bootstrap 插件 ， 从 而 在 Angular 
应 用 中 使 用 Bootstrap 的 各 种 组 件 。 可 以 使 用 Bootstrap 的 CSS 代码 ， 力 至 从 CDN 加 载 整个 CSS 
文件 ， 配 合 这 些 Angular 指令 。 


9.2 首次 搭建 Angular 应 用 


Angular 2 的 前 身 是 AngularJS。 如 果 你 已 经 熟练 掌握 了 Angular2， 则 可 以 跳 过 本 节 的 内 容 。 
访问 Angular 2 的 官方 网 站 ， 可 了 解 更 多 相关 信息 : https://angular.io/。 在 官方 网 站 上 ， 可 以 找到 
"Getting Started” 部 分 的 内 容 ， 其 中 包含 了 一 份 $ 分 钟 快速 上 手 的 指南 以 及 “英雄 指南 ”教程 。 








本 书 是 关于 Bootstrap 的 ， 因 此 不 会 详细 介绍 Angular2。 言 虽 如 此 ， 还 是 建议 你 
在 继续 阅读 前 体验 一 下 Angular 2 的 快速 上 手指 南 和 教程 。 











我 们 将 复 用 “5 分 钟 快速 上 手指 南 ” 里 的 源 代 码 ， 用 Bootstrap 搭建 自己 的 Angular 2 网 站 。 








可 以 用 TypeScript, Dart 或 者 JavaScript 来 编写 Angular 2 应 用 。 本 书 中 ， 我 们 将 
使 用 TypeScript。TypeScript 是 一 门 由 微软 开发 和 维护 的 开源 编程 语言 。 它 是 
JavaScript 的 一 个 严格 的 超 集 ， 以 可 选 的 方式 提供 了 静态 类 型 支持 和 基于 类 的 面 

人 向 对 象 编程 特性 。TypeScript 能 编译 成 简洁 的 JavaScript 代码 并 运行 在 任意 浏览 
器 、Node.js 以 及 任何 支持 ECMAScript 3 及 以 上 版 本 的 JavaScript 引擎 中 。 有 关 
TypeScript 的 更 多 内 容 ， 可 参考 https://www.typescriptlang.org/。 


运行 以 下 命令 ， 开 启 Angular 之 旅 : 
git clone https://github.com/angular/quickstart start 
Git 是 一 个 用 于 软件 开发 及 其 他 版 本 相关 任务 的 版 本 控制 系统 ，Angular 的 “5 分 
钟 快速 上 手指 南 ” 的 源 代码 则 可 以 从 GitHub 这 一 Git 仓库 托管 服务 中 免费 获取 。 
上 述 命 令 会 将 “5 分钟 快速 上 手指 南 ” 的 源 代码 复制 到 一 个 名 为 start 的 新 文件 夹 中 。 进 入 该 
文件 夹 并 运行 以 下 命令 : 


npm install && npm start 











该 命令 会 创建 一 个 使 用 TypeScript 的 非常 简单 的 Angular 2 应 用 。 而 我 们 则 会 基于 该 应 用 来 
构建 自己 的 项 目 。 运 行 npm start 命令 后 ，TypeScript 编译 器 和 轻 量 级 Web 服务 器 会 监听 文件 
的 改动 。 当 文件 发 生变 化 时 ， 重 新 将 TypeScript 编译 成 JavaScript 并 刷新 浏览 器 。 

在 不 做 任何 别 的 改动 的 情况 下 ， 可 以 在 浏览 器 中 访问 http://localhost:3000 打开 应 用 程序 。 结 
果 如 下 图 所 示 。 
































My First Angular 2 App 
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接 下 来 ， 我 们 将 该 应 用 重建 为 一 个 含 四 个 网 页 的 小 网 站 。 


9.3 在 应 用 中 添加 路 由 


可 以 访问 以 下 网 址 https://angular.io/docs/ts/latest/tutorial/toh-pt5.html , 学 习 更 多 有 关 Angular 2 
中 路 由 的 知识 ， 这 有 助 于 理解 我 们 接 下 来 的 开发 步骤 。 


我 们 的 小 网 站 将 拥有 以 下 四 个 页 面 : Home, Features, Pricing 和 About。 所 以 我 们 需要 创 
娃 四 个 新 的 组 件 〈 视图 )。 对 于 主页 而 言 ， 在 app 文件 夹 下 创建 一 个 名 为 home.component.ts 的 文 
件 ， 其 中 包含 以 下 TypeScript 代码: 


import { Component } from 'Gangular/core'; 
GComponent ({ 
selector: 'home', 
template: '«h3»Homec/h3»' 
} 
export class HomeComponent { 


} 


ini 








将 以 上 步骤 重复 应 用 于 其 他 页 面 ， 创 建 features.component'ts pricing.component.ts 和 about. 
component.ts 文件 。 


然后 创建 一 个 名 为 app/app.routes.ts 的 新 文件 ， 其 中 包含 以 下 TypeScript 代码 ; 


import { provideRouter, RouterConfig ) from 'Gangular/router'; 
import ( HomeComponent ) from './home.component'; 

import ( FeaturesComponent ) from './features.component'; 
import { PricingComponent ) from './pricing.component'; 


import ( AboutComponent ) from './about.component'; 
const routes: RouterConfig - [ 
{ 
path: 'home', 
component: HomeComponent 
) 
( 
path: 'features', 
component: FeaturesComponent 
} 
{ 
path: 'pricing', 
component: PricingComponent 
} 
paths “about, 
component: AboutComponent 





} 
{ 
path: '', 
redirectTo: '/home', 
pathMatch: 'full' 
} 
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um 
export const appRouterProviders - [ 
provideRouter(routes) 
J 
做 完 这 些 改 动 后 ， 还 应 在 root 文件 夹 下 的 index.html 文件 中 添加 base 标签 。 在 编辑 器 中 打 
JF index.html 文件 ， 添 加 以 下 HTML 代码 : 


<head> 
<base href="/"> 


接 下 来 ,我 们 开始 编辑 app/app.component.ts 文件 。 


9.4 配置 导航 


原始 的 主 应 用 组 件 ( app/app.component.ts ) 应 当 只 处 
使 之 包含 以 下 TypeScript 代码: 


import { Component } from 'Gangular/core'; 
import ( ROUTER DIRECTIVES ) from 'Gangular/router'; 
GComponent ({ 

selector: 'my-app', 

template: `<ul> 





























li 





导航 。 编 辑 app/app.component.ts 文件 ， 








<li><a [routerLink]-"['/home']" routerLinkActive="active">Home</a></1i> 
<li><a [routerLink]-"['/features']" routerLinkActive-"active"»Features«/a»«/li» 
<li><a [routerLink]-"['/pricing']" routerLinkActive-"active"»Pricing«/a»«/li» 
<li><a [routerLink]-"['/about']" routerLinkActive-"active"»About«/a»«/li» 
</ul> 
<router-outlet></router-outlet>`, 
directives: [ ROUTER_DIRECTIVES ] 


)) 


export class AppComponent ( j 


当 我 们 在 应 用 程序 中 用 导航 切换 界面 时 ，<zouter-outlet> 下 相应 的 路 由 组 件 就 能 立即 显 
示 出 来 。 


在 浏览 器 中 观察 ， 最 终 的 结果 如 下 图 所 示 。 





Home 

e Features 
* Pricing 
About 








Home 





点 击 其 中 的 链接 ， 页 面 就 会 加 载 一 张 新 的 视 网 。 接 下 来 ， 我 们 将 Bootstrap 集成 到 项 目 中 ! 


9.5 在 应 用 程序 中 添加 Bootstrap 的 标记 代码 2715 


9.5 在 应 用 程序 中 添加 Bootstrap 的 标记 代码 


再 次 在 编辑 器 中 打开 app/app.component.ts 文件 。 将 template 元 数据 替换 成 cemplateUrl 
生 ， 并 将 属性 值 设 为 app/app.componenthtml 这 一 新 的 模板 文件 ， 如 下 所 示 : 


@Component ({ 
selector: 'my-app', 
templateUrl: 'app/app.component.html', 
directives: [ ROUTER DIRECTIVES | 

) 


然后 , 就 可 以 将 Bootstrap 的 HTML 标记 结构 添加 到 app/app.component.html 模板 文件 中 。 将 
导航 列表 替换 成 响应 式 的 导航 条 ， 同 时 使 用 container 以 及 别 的 网 格 类 。 最 后 的 HTML 代码 如 
下 所 示 : 


«div class="container"> 
<div class="row"> 
«hi»((title))«/h1» 
«/div» 
«/div» 
«nav class-"navbar navbar-light bg-faded"'» 
«button class-"navbar-toggler hidden-sm-up" type-"button" aria-controls- 
"exCollapsingNavbar2" aria-expanded-"false" aria-label-"Toggle navigation"'» 








Kus 
Pam) 
3 














«/button» 
«div class-"navbar-toggleable-xs"» 
«div class-"container"» 
«ul class="nav navbar-nav"» 
























































«li class-"nav-item"-» 
«a class-"nav-link active" [routerLink]-"['/home']" 
routerLinkActive-"active"»Home«c/a» 
«/li» 
«li class-"nav-item"-» 
«a class-"nav-link" [routerLink]-"['/features']" routerLinkActive- 
"active"»Features«c/a» 
«/li» 
«li class-"nav-item"-» 
«a class-"nav-link" [routerLink]-"['/pricing']" 
routerLinkActive-"active"»Pricing«c/a» 
«/li» 
«li class-"nav-item"» 
«a class-"nav-link" [routerLink]-"['/about']" 
routerLinkActive-"active"»About«/a» 
«/li» 
«/ul» 
«/div» 
«/div» 
«/nav» 


«main class-"container"» 
«router-outlet»«/router-outlet» 
«/main» 
«footer class-"container"» 
«div class="row"> 





276 第 9 章 用 Bootstrap 搭建 Angular 应 用 





«div class-"col-xs-12 text-xs-center"> 
&copy; 2016 ((title)) 
«/div» 
«/div» 
«/footer» 





回顾 第 1 章 ， 了 解 更 多 有 关 Bootstrap 导航 条 标记 结构 方面 的 信息 。 
再 次 在 浏览 器 中 观察 结果 ， 导 航 如 下 图 所 示 。 























Your Business 




















D 2016 Your Business 











正如 在 上 面 的 截图 中 所 看 到 的 ， 显 示 效 果 不 佳 。 我 们 尚未 在 应 用 中 加 载 Bootstrap 的 CSS fX 
码 , 因此 显示 的 HTML 并 无 样式 可 言 。 接 下 来 , 我 们 将 在 应 用 程序 中 添加 Bootstrap 的 CSS 代码 。 


9.6 在 应 用 程序 中 集成 Bootstrap 的 CSS 代码 


接 下 来 ， 我 们 需要 在 应 用 程序 中 添加 Bootstrap 的 CSS 代码 。 当 然 ， 我 们 可 以 采取 简单 的 做 
ik, 在 index.html 中 通过 链接 从 CDN 加 载 CSS 文件 , 但 那么 做 却 无 法 有 效 利 用 Bootstrap 底层 的 
Sass 代码 。 








我 们 的 应 用 程序 中 ， 每 个 组 件 都 有 其 自己 的 样式 表 。 而 应 用 的 主 样 式 则 通过 styles.css 文件 
加 载 。 我 们 将 建立 一 个 构建 系统 ,把 Bootstrap 的 SCSS 代 码 和 自己 的 定制 代码 一 起 打包 到 styles.css 
文件 里 。 





—- 


首先 ， 运行 以 下 命令 ， 通 过 npm 安装 Bootstrap 的 源 代码 : 
npm install bootstrap --save-dev 


然后 ， 建 立 一 个 与 之 前 章节 类 似 的 文件 结构 : 


scss/styles.scss 
Scss/includes/ bootstrap.sccs 
Scss/includes/ variables.sccs 


























scss/ includes/ variables.scss 文件 用 于 覆盖 Bootstrap 中 的 默认 值 ， 而 scss/ includes/ bootstrap.scss 
文件 则 是 bootstrap.scss 源 文件 的 一 份 副本 。 在 scss/_includes/_ bootstrap.sess 文件 中 ， 所 有 的 Bootstrap 
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组 件 模块 都 是 单独 加 载 的 ， 因 此 我 们 可 以 注释 掉 不 需要 的 部 分 。 通 过 将 Sass 编译 器 的 includePath 
选项 设 为 node_modules 文件 夹 ， 就 可 以 加 载 node_modules 文件 夹 里 的 源 代码 。 我 们 将 在 下 一 节 
中 设置 Sass 编译 右 。 





























9.6.1 设置 Sass 编译 器 
运行 以 下 命令 ， 设 置 node-sass 这 一 Sass 编译 器 : 


npm install node-sass --save-dev 





node-sass 模块 使 用 libSass 编译 Sass 代码 。 请 注意 ，libSass Ej Compass 并 不 兼容 。 有 关 
node-sass 模块 的 更 多 信息 ， 可 参考 以 下 网 址 : https://github.com/sass/node-sass。 
第 2 章 介绍 了 如 何在 构建 流程 中 通过 gulp-sass 来 使 用 node-sass 编译 器 。 


安装 node-sass 模块 后 , 编辑 项 目 里 的 package.json 文件 , 并 按 以 下 方式 在 脚本 属性 区 域 创建 
一 个 新 的 条 目 : 


"compile-scss": "node-sass --output-style expanded --precision 6 --source-comments 
false --source-map true --include-path node modules -o . scss" 









































现在 ， 即 可 运行 以 下 命令 ， 将 scss/styles.scss 编译 成 styles.css: 


npm compile-scss 


将 上 述 命 令 添 加 到 启动 命令 中 ， 如 下 所 示 : 

"Start": "npm run compile-scss & tsc && concurrently "tsc -w" "lite-server"", 

这 样 ， 当 运行 npm start 命令 时 ，scss/styles.scss 文件 就 会 被 编译 成 styles.css 文件 。 可 以 看 
到 , 启动 命令 中 已 经 包含 了 tsc -w 命令 , 因此 会 监听 TypeScript 文件 的 改动 。 当 有 任何 HTML, 
CSS 或 JavaScript 文件 发 生变 化 时 ，Web 服务 器 就 会 自动 重新 加 载 。 而 当 任意 Sass 文件 发 生 改 动 
时 ，CSS 也 应 重新 编译 。 可 以 用 Nodemon 模块 来 监听 .scss 文件 。 

Nodemon 可 以 监听 文件 的 改动 ， 并 相应 地 重启 程序 。 可 以 运行 以 下 命令 ， 安 装 Nodemon: 

npm install nodemon --save-dev 

安装 完成 后 ， 对 package.json 文件 的 脚本 属性 做 如 下 修改 : 


"Start": "concurrently "npm run watch-scss" & tsc && concurrently "tsc -w" 
"lite-server" ", "watch-scss": "nodemon -e scss -x "npm run compile-scss"", 

















请 注意 , node-sass 模块 自 带 watch 选项 , 但 使 用 该 watch 选项 后 却 无 法 对 编译 

Ò 结果 做 后 置 处 理 。 我 们 将 在 下 一 节 对 编译 结果 做 后 置 处 理 。 测 试 一 下 刚 创建 的 
新 命令 。 首 先 运行 npm start 命令 ， 然 后 修改 scss/styles.scss 文件 并 保存 。 保 
存 后 ，Sass 编译 器 会 自动 启动 ， 而 浏览 器 窗口 也 会 自动 重新 加 载 。 
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9.6.2 添加 后 BEANS 


正如 前 面 所 介绍 的 ,在 将 Bootstrap 的 Sass 代码 编译 成 CSS 时 需 使 用 到 postess 和 autoprefixer 
等 后 置 处 理 器 。 默 认 情 况 下 ，Bootstrap 还 会 运行 postcss-flexbugs-fixes Jr EALA o 





























postcss-flexbugs-fixes 会 尝试 修复 Flexbox 布局 在 各 种 浏览 器 上 的 问题 。 更 多 信息 
可 参考 以 下 网 址 : https:// Loc MS IN 


首先 ， 必 须 运行 以 下 命令 ， 安 装 postess KIEA ELA Els : 


npm install postcss-cli autoprefixer postcss-flexbugs-fixes --save-dev 


模块 安装 完成 后 ,只 要 简单 地 复 用 Bootstrap 的 后 置 处 理 设置 即 可 。 在 package.json 文件 的 脚 
本 属性 中 添加 以 下 条 目 


"postcss": "postcss --config node modules/bootstrap/grunt/postcss.js --replace 
Sstyles.css" 


然后 ， 添 加 一 个 新 的 命令 ， 在 Sass 编译 完成 后 运行 后 置 处 理 器 ， 如 下 所 示 : 


"build:css" : "npm run compile-scss && npm run postcss" 


由 于 应 该 让 nodemon 执行 puild:css 命令 ,因此 别 忘 了 对 watch-scss 命令 做 相应 的 修改 : 


"watch-scss": "nodemon -e scss -x "npm run build:css"" 


最 后 ，package.json 文件 中 的 脚本 属性 应 如 下 所 示 : 






































"Scripts": ( 

"start": "concurrently "npm run watch-scss" & tsc && concurrently "tsc -w" 
"lite-server" ", 

"docker-build": "docker build -t ng2-quickstart .", 


"docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 
ng2-quickstart", 
"pree2e": "npm run webdriver:update", 








"e2e": "tsc && concurrently "http-server -s" "protractor protractor.config.js" 
--kill-others --success first", 

"lint": "tslint ./app/**/*.ts -t verbose", 

"lite": "lite-server", 

"postinstall": "typings install", 

"test": "tsc && concurrently "tsc -w" "karma start karma.conf.js"", 

"Lest-once": "tsc && karma start karma.conf.js --single-run", 

"ee PES; 

"ESciw TESO cw". 

"typings": "typings", 

"webdriver:update": "webdriver-manager update", 


"build:css": "npm run compile-scss && npm run postcss", 

"postcss": "postcss --config node modules/bootstrap/grunt/postcss.js --replace 
styles.css", 

"watch-scss": "nodemon -e scss -x "npm run build:css"", 

"compile-scss": "node-sass --output-style expanded --precision 6 --source-comments 
false --source-map true --include-path node modules -o .scss" 
Ju 
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最 终 的 结果 会 如 下 图 所 示 。 





Your Business 


Home 


Home 
© 2016 Your Business 











9.6.3 ”使 用 ng-bootstrap 指令 


调整 浏览 器 窗口 大 小 并 使 视 口 宽度 小 于 768 像素 。 可 以 看 到 导航 条 会 堆 琶 显示 成 下 图 中 的 
RETS 

















Your Business 


Home 
© 2016 Your Business 























点 击 用 于 展开 菜单 的 汉堡 菜单 按钮 后 没有 反应 。 这 是 因为 我 们 并 没有 引入 它 所 依赖 的 
JavaScript 折 又 插件。 如 本 章 之 前 所 描述 的 ， 我 们 不 应 使 用 Bootstrap 中 的 JavaScript 插件 ， 而 应 
以 相关 的 Angular 指令 取代 之 。 


还 记得 吗 ，Angular 指令 就 是 DOM 元 素 上 的 一 些 标记 ， 用 于 在 编译 过 程 中 声明 对 元 素 的 附 
加 功能 及 对 元 素 的 转换 。 


可 以 用 ng-bootstrap 指令 来 替换 Bootstrap 中 的 jQuery 插件 .有 关 该 指令 的 更 多 信息 , 可 参考 : 
https://ng-bootstrap.github.io/。 


HÁTA FER, EM H PER ng-bootstrap 指令 。 























首先 ， 运 行 以 下 命令 ， 安 装 ng-bootstrap 指令 

npm install Gng-bootstrap/ng-bootstrap --save-dev 

然后 ， 在 项 目 根 目 录 下 打开 angular-cli-build.js 文件 ， 添 加 以 下 代码 : 
// 上 映射 告知 系统 加 载 器 从 哪里 找 


var map = ( 
'app': "apps, 7/7 "dist, 
'QGangular': 'node modules/Gangular', 


'angular2-in-memory-web-api': 'node modules/angular2-in-memory-web-api', 
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i 'node modules/rxjs', 
'Qng-bootstrap/ng-bootstrap': 'node modules/Gng-bootstrap/ng-bootstrap' 
J 
// 包 告 知 系统 加 载 器 当 没 有 文件 名 或 扩展 时 如 何 加 载 


var packages = ( 
'app': ( main: 'main.js',  defaultExtension: 'js' ) 
"pe". ( defaultExtension: 'js' ), 
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
'Gng-bootstrap/ng-bootstrap': ( defaultExtension: 'js', main: 'index.js' ) 


之 后 ， 我 们 将 修改 应 用 中 的 组 件 及 其 HTML 模板 。 首 先 编辑 app.components.ts 文件 ， 使 其 
TypeScript 代码 如 下 所 示 : 


import { Component ) from 'Gangular/core'; 
import ( ROUTER DIRECTIVES ) from 'Gangular/router'; 
import (NGB COLLAPSE DIRECTIVES) from 'Gng-bootstrap/ng-bootstrap'; 
GComponent(( 
Selector: 'my-app', 
templateUrl: 'app/app.component.html', 
directives: [ ROUTER DIRECTIVES, NGB COLLAPSE DIRECTIVES] 
j 
export class AppComponent ( 
title - 'Your Business'; 
private isCollapsed - true; 


} 


可 以 看 到 ， 上 述 代 码 在 组 件 中 引入 了 折 和 县 相关 的 指令 。 按 如 下 方式 编辑 修改 : 


«button class-"navbar-toggler hidden-sm-up" type-"button" 
(click)s"isCollapsed = !isCollapsed" aria-expanded-"false" aria- 
label-"Toggle navigation" 




















«/button» 
«div class-"navbar-toggleable-xs" [ngbCollapse]-"isCollapsed"- 








运行 npm start 命令 并 在 浏览 器 中 观察 结果 。 在 小 视 口 环境 下 ， 汉 堡 菜单 已 经 可 以 正常 工 
作 了 。 


至 此 ， 我 们 介绍 了 如 何在 Angular 2 项 目 中 集成 Bootstrap ， 同 时 也 搭 好 了 网 站 的 骨架 。 
1. 使 用 其 他 指令 


根据 ng-bootstrap 官方 网 站 ,目前 已 有 的 指令 与 Bootstrap 组 件 之 间 并 未 做 到 完全 的 一 一 对 应 。 
而 与 此 同时 ， 有 些 组 件 指令 则 是 ng-bootstrap 所 特有 的 ， 在 Bootstrap 中 并 不 存在 。 


比如 ， 评 级 组 件 就 是 ng-bootstrap 中 所 特有 的 。 可 以 用 以 下 步 又 在 项 目 中 使 用 该 组 件 。 


在 编辑 器 中 打开 home.component.ts 文件 ， 添 加 评级 组 件 指令 及 相关 的 HTML 代码 。 参 考 示 
例 代 码 。 修 改 后 的 TypeScript 如 下 所 示 : 
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import ( Component ) from 'Gangular/core'; 
import (NGB RATING DIRECTIVES) from 'Gng-bootstrap/ng-bootstrap'; 


GComponent ({ 
selector: 'home', 
template: ^«h3»Home«/h3» 
«ngb-rating [(rate)]-"currentRate"»«/ngb-rating» 
«hr» 
«pre»Rate: «b»((currentRate))«/b»«/pre»', 
directives: [NGB RATING DIRECTIVES] 
} 
export class HomeComponent { 
currentRate = 10; 


} 


修改 完成 后 ， 主 页 视图 的 最 终 效 果 显 示 如 下 。 











Your Business 


[z] 


Home 


LasdSqs4$2zxzqdeq! 


Rate: 10 


© 2016 Your Business 











2. 将 ng2-bootstrap 指令 作为 候选 方案 





ng-bootstrap 指令 由 Google 的 Angular 2 团队 所 维护 ， 其 前 身 为 Angular UI Bootstrap 库 。 除 
了 该 类 库 外 ， 还 存在 由 Valor Software 公司 所 维护 的 ng2-bootstrap 模块 。 这 些 用 于 Bootstrap 的 
Angular 2 指令 在 Bootstrap 3 和 Bootstrap 4 中 都 能 正常 工作 。 


可 以 重复 之 前 集成 ng-bootstrap 模块 的 步 又， 将 ng-bootstrap 指令 替换 为 ng2-bootstrap 指令 。 
首先 ， 运行 以 下 命令 ， 安 装 ng2-bootstrap 指令 : 


npm install ng2-bootstrap --save 











ng2-bootstrap 指令 安装 完成 后 ， 还 需要 修改 angular-cli-build.js 、app.components.ts 和 app. 
components.html 文件 。 另 外 , 可 参考 以 下 网 址 中 的 指导 步骤 : https://github.com/valor-software/ngx- 
bootstrap#quick-start。 该 指导 提供 了 在 Angular 2 中 使 用 ng2-bootstrap 模块 的 5 分 钟 快 速 上 手 
指南 。 


ng2-bootstrap 模块 中 包含 了 datepicker 和 timepicker 及 其 他 组 件 。 其 中 ，datepicker 组 件 的 显 
示 效 时 如 下 。 NE] 
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Example 
Selected date is: Sunday, 
Inline 
< October 2017 
Su Mo Tu We Th 
40 01 02 03 04 | 05 
41 08 09 10 11 12 
42 | 15 16 17 18 19 
43 22 23 24 25 26 


| || 2009-08-24 Min date 


October 29, 
> 
Fr Sa 
06 | 07 
13 | 14 
20 | 21 
27 | 28 








9.7 下载 完整 的 代码 





与 本 书 中 的 其 他 项 目 一 样 ， 可 以 访问 Packt 出 版 社 网 站 (http:/www.packtpub.com/support ), 


下 载 项 目 源 代码 。 本 章 项 目的 源 代码 文件 保存 在 chapter9/finish 目录 里 。 
打开 chapter9/finish 文件 夹 并 运行 以 下 命令 ， 启 动 项 目 : 


npm install && npm start 


本 书 中 涉及 的 项 目 源 代码 也 被 发 布 到 了 GitHub 上 。 下 载 地 址 为 : https://github.com/ 


bassjobsen/angular2-bootstrap4-website-builder。 可 以 简单 地 


qp 项 目 源 文件 : 


mox 


AUR 


git clone https://github.com/bassjobsen/angular2-bootstrap4-website- 


builder.git yourproject 


9.8 使 用 Angular CLI 


Angular CLI 是 基于 ember-cli 项 目的 Angular 2 应 用 程序 CLI ( Command Line Interface , 
行 界面 ) 工具 。 该 工具 可 以 帮助 你 更 轻松 地 配置 和 开发 Angular 2 项 目 。 
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可 以 通过 Angular CLI 使 用 之 前 介绍 的 ng-bootstrap 和 ng2-bootstrap 指令 。Angular CLI 工 具 
使 用 的 是 webpack 这 一 模块 打包 工具 。 该 工具 会 通过 插件 加 载 机 制 对 Sass 文件 进行 预 处 理 。 如 
果 项 目 中 尚未 通过 CDN 的 方式 加 载 Bootstrap 的 CSS 代码 , 则 必须 配置 webpack, 用 该 工具 来 对 
Bootstrap 的 Sass 进行 预 处 理 和 后 置 处 理 。 

















9.9 在 React.js 中 使 用 Bootstrap 


React 是 另 一 个 流行 的 JavaScript 类 库 ， 可 用 于 构建 Web 应 用 的 用 户 界面 CUI) 组件。 与 
Angular 相 比 ，React 采 用 了 组 件 组 装 的 理念 ， 而 非 Angular 中 的 模板 逻辑 。 在 组 件 组 装 这 一 理念 
里 ， 页 面 逻 辑 并 不 会 存储 在 一 个 额外 的 模板 文件 中 。 相 应 的 ，React 技术 使 用 了 一 种 名 为 JSX 
( JavaScript syntax extension, JavaScript 语法 扩展 ) 的 语法 。 该 语法 和 HTML 类 似 ， 最 终 会 被 编 
译 成 JavaScript 代码 。 


使 用 React 的 最 简单 的 方式 可 能 就 是 直接 从 CDN 加 载 需要 的 类 库 了 。React 支持 包括 IE9 在 
内 的 所 有 的 主流 浏览 器 。 根 据 文档 ， 可 以 从 JSFiddle 上 的 Hello World 示例 开始 体验 React。 该 示 
例 的 网 址 为 : https://jsfiddle.net/reactjs/69z2wepo/。 该 示例 最 终 会 打印 出 “hello world” 的 字样 。 


本 书 讲述 的 是 Bootstrap, 因此 不 详细 介绍 JSXzu。 有关 React 和 JSX 的 知识 , 可 以 观看 Samer 
Buna 的 相关 视频 ， 地 址 为 https://www.packtpub.com/web-development/learning-reactjs-video。 接 下 
来 ， 我 们 将 Bootstrap 添加 到 React 应 用 中 。 






































使 用 Bootstrap 4 的 React 组 件 


Reactstrap 是 一 个 包含 Bootstrap 4 的 React 组 件 的 类 库 。 其 文档 地 址 为 : https://reactstrap. 
glithub.io。 


可 以 执行 以 下 步 又， 在 本 机 系统 中 安装 Reactstrap : 

口 运行 以 下 命令 : 

git clone https://github.com/reactstrap/reactstrap.git reactstrap 
口 打开 reactstrap 文件 夹 并 运行 以 下 命令 : 

npm install && npm start 


npm start 命令 会 在 开发 环境 下 启动 webpack 的 Web 服务 器 ， 访 问 地 址 为 : http://localhost: 
8080/webpack-dev-server/。 如 之 前 所 提 到 的 ，Webpack 是 一 个 JavaScript 下 的 模块 打包 工具 。 在 
浏览 圳 里 打开 http://localhost:8080/webpack-dev-server/， 显 示 绪 果 如 下 图 所 示 。 























284 第 9 章 用 Bootstrap 搭建 Angular 应 用 


reactstrap 








reactstrap 


Easy to use React Bootstrap 4 components 


| View on Github | View Components 











请 注意 ，Reactstrap 依赖 Bootstrap 的 CSS 代码 ， 但 不 依赖 jQuery 或 Bootstrap 的 JavaScript 
插件 。 


可 以 在 JSFiddle 的 Hello World 示例 里 使 用 Reactstrap。 访问 该 示例 的 网 址 并 创建 一 个 自己 的 
分 支 。 


然后 添加 以 下 外 部 资源 : 











O https://npmcdn.com/bootstrap@4.0.0-alpha.3/dist/css/bootstrap.min.css ( Bootstrap 的 CSS 代码 ) 
口 https:/npmcdn.comy/reactstrap@2/distreactstrap.min.js ( Reactstrap 类 库 ) 


最 终 ， 加 载 的 资源 文件 会 如 下 图 所 示 。 














External Resources 


browser.js 
react-with-addons.js 
react-dom.Js 


bootstrap.min.css 








0000 0 


reactstrap.min.js 
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接着 编辑 JavaScript 代码 。 可 编写 以 下 JavaScript 程序 ， 在 页 面 上 显示 Bootstrap 中 的 警告 
按钮 : 





























const ( 
Button 
) = Reactstrap; 
var Hello = React.createClass(t 
render: function() { 
return «Button color-"danger"»danger«/Button»; 
} 
)); 
ReactDOM.render( 
«Hello name-"World" />, 
document.getElementById('container') 


); 


最 后 ， 点 击 页 面 上 的 run 按钮 ， 结 果 会 如 下 图 所 示 。 


可 以 访问 https://jsfiddle.net/bassjobsen/2fz6aLrv/， 查 看 该 定制 的 JSFiddle 示例 。 

















9.10 ”其 他 用 于 部 署 Bootstrap 4 的 工具 


可 以 访问 以 下 网 址 ， 查 看 在 Brunch 中 使 用 Bootstrap 4 的 骨架 代码 : — https://github.com/ 
bassjobsen/brunch-bootstrap4。Brunch 是 一 个 Web 应 用 的 前 端 构建 工具 。 可 以 对 HTMLS 应 用 进行 
代码 静态 检查 、 编 译 、 拼 接 ， 以 及 缩减 构建 结果 的 大 小 。 


可 以 访问 Brunch 的 官方 网 站 (http:/brunch.io/ )， 了 人 解 更 多 相关 信息 。 可 运行 以 下 命令 ， 尝 
试 使 用 Brunch: 


npm install -g brunch 
brunch new -s https://github.com/bassjobsen/brunch-bootstrap4 


请 注意 ， 上 述 第 一 个 命令 需要 管理 员 权限 才能 执行 。 安 装 完 成 后 ， 可 以 运行 以 下 命令 构建 
项 目 : 
brunch build 


该 命令 会 创建 一 个 名 为 public/index.html 的 新 文件 。 在 浏览 器 中 打开 该 文件 ， 即 可 观察 到 下 
图 所 示 的 效果 。 
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Carousel Home Features Pricing About 


One more for good measure. 


Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta 
gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. 


Browse gallery 





Heading 


Donec sed odio dui. Etiam porta sem 
malesuada magna mollis euismod. Nullam id 
dolorid nibh ultricies vehicula utid elit Morbi 
leo risus, porta ac consectetur ac, vestibulum 

at eros. Praesent commodo cursus magna. 


Heading 


Duis mollis, est non commodo luctus, nisi erat 
porttitor ligula, eget lacinia odio sem nec elit. 
Cras mattis consectetur purus sit amet 
fermentum. Fusce dapibus, tellus ac cursus 
commodo, tortor mauris condimentum nibh. 


Heading 


Donec sed odio dui. Cras justo odio, dapibus 
ac facilisis in, egestas eget quam. Vestibulum 
id ligula porta felis euismod semper. Fusce 
dapibus, tellus ac cursus commodo, tortor 
mauris condimentum nibh, ut fermentum 


massa justo sit amet risus. 


View details » View details » 


View details » 











Yeoman 





Yeoman 也 是 一 个 构建 工具 。 它 采用 被 称 为 “生成 器 ”的 脚手架 模板 技术 ， 用 命令 行 的 方式 
创建 项 目 。 可 以 访问 以 下 网 址 , 查看 用 于 生成 Bootstrap 4 前 端 应 用 的 脚手架 生成 器 : https://github. 
comy/bassjobsen/generator-bootstrap4。 





可 以 执行 以 下 命令 ， 运 行 Yeoman 中 的 Bootstrap 4 生成 器 : 


npm install -g yo 


npm install -g generator-bootstrap4 
yo bootstrap4grunt serve 


与 之 前 一 样 ， 前 两 个 命令 需要 管理 员 权 限 方 能 执行 。 


grunt serve 命令 会 在 本 地 启动 一 个 Web 服务 器 ， 访 问 地 址 为 http:/localhost:9000。 用 浏 
览 器 打开 该 地 址 ， 即 可 看 到 下 图 所 示 的 效果 。 
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About Contact 


yeoman 


'Allo, 'Allo! 


Always a pleasure scaffolding your apps. 


Splendid! 


Bootstrap 4 


Sleek, intuitive, and 
powerful mobile first 
front-end framework for 
faster and easier web 
development. 











9.11 小 结 


至 此 ,本 书 的 内 容 就 全 部 介绍 完毕 了 。 希望 你 享受 整个 学 习 的 过 程 并 有 所 收获 。 你 可 以 开始 
创建 属于 自己 的 Bootstrap 4 项 目 ， 并 用 所 学 的 工具 部 署 项 目 。 


本 章 介 绍 了 如 何 启动 一 个 使 用 Bootstrap 4 的 Angular 2 应 用 ， 还 介绍 了 可 用 于 部 署 项 目的 其 
他 工具 。 干 得 漂亮 ! 


除了 我 们 所 介绍 的 内 容 ， 有 关 Bootstrap 还 有 很 多 别 的 资源 可 供 学 习 。Bootstrap 社区 非常 活 
跃 。 当 下 也 是 Web 前 端 开发 历史 中 令 人 兴奋 的 时 刻 。 可 以 说 ，Bootstrap 已 然 青 史 留 名 。 你 可 以 
访问 我 的 GitHub 页 面 (http://github.com/bassjobsen )， 了 解 新 项 目 和 更 新 的 资源 ， 也 可 以 在 Stack 
Overflow 上 疝 我 提问 (http://stackoverflow.com/users/1596547/bass-jobsen )。 
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